/* Clever Little Cubs — showcase site. Brand: Work Sans + teal/yellow/cream. */ @font-face { font-family:"Work Sans"; font-weight:400; font-display:swap; src:url("assets/fonts/WorkSans-Regular.ttf") format("truetype"); } @font-face { font-family:"Work Sans"; font-weight:700; font-display:swap; src:url("assets/fonts/WorkSans-Bold.ttf") format("truetype"); } :root { --teal:#00838F; --teal-dark:#005F6B; --yellow:#FFD84D; --yellow-dark:#E6A800; --cream:rgb(252,250,245); --charcoal:#2C2C2C; --ink:#2C2C2C; --muted:#6b6b6b; --line:#e7e1d5; --maxw:1100px; --radius:16px; --shadow:0 6px 24px rgba(0,80,90,.10); } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; font-family:"Work Sans",system-ui,sans-serif; color:var(--ink); background:var(--cream); line-height:1.55; } img { max-width:100%; display:block; } a { color:var(--teal-dark); } h1,h2,h3 { line-height:1.15; text-wrap:balance; margin:0 0 .5em; } /* header / footer */ .site-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width:var(--maxw); margin:0 auto; padding:1rem 1.25rem; } .brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--teal-dark); } .brand-mark { width:40px; height:40px; object-fit:contain; } .brand-name { font-weight:700; font-size:1.15rem; letter-spacing:.2px; } .brand-trust { font-size:.82rem; font-weight:700; color:#fff; background:var(--teal); padding:.35rem .7rem; border-radius:999px; } .site-foot { max-width:var(--maxw); margin:2.5rem auto 0; padding:1.5rem 1.25rem 2.5rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center; font-size:.9rem; color:var(--muted); } .foot-free { font-weight:700; color:var(--teal-dark); } /* hero */ .hero { max-width:var(--maxw); margin:1rem auto 0; padding:1.5rem 1.25rem 2.5rem; display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; } .hero-text h1 { font-size:clamp(2rem,5vw,3.1rem); } .accent { color:var(--teal); } .hero-sub { font-size:1.08rem; color:#454545; max-width:34ch; } .hero-art img { margin-inline:auto; max-height:320px; filter:drop-shadow(0 10px 20px rgba(0,80,90,.15)); } /* buttons */ .btn { display:inline-block; font-weight:700; text-decoration:none; border-radius:999px; padding:.8rem 1.5rem; transition:transform .08s ease, box-shadow .2s ease; } .btn:active { transform:translateY(1px); } .btn-primary { background:var(--yellow); color:#3a2c00; box-shadow:0 4px 0 var(--yellow-dark); } .btn-primary:hover { box-shadow:0 6px 14px rgba(230,168,0,.4); } .btn-buy { background:var(--teal); color:#fff; box-shadow:0 4px 0 var(--teal-dark); margin:.4rem 0 .2rem; } .btn-buy:hover { box-shadow:0 6px 16px rgba(0,95,107,.4); } /* catalogue grid */ .catalogue { max-width:var(--maxw); margin:0 auto; padding:1rem 1.25rem 1rem; } .section-title { font-size:1.6rem; text-align:center; margin-bottom:1.2rem; } /* min(240px,100%) so a card's min-track can never exceed the viewport -> no horizontal overflow even <320px. (Mobile contract: in , `* box-sizing:border-box`, `img max-width:100%` — all above.) */ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:1.5rem; } .card { background:#fff; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .12s ease, box-shadow .2s ease; display:flex; flex-direction:column; } .card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(0,80,90,.16); } .card-img { aspect-ratio:1/1; background:var(--cream); } .card-img img { width:100%; height:100%; object-fit:cover; } .card-cover { aspect-ratio:3/4; background:var(--cream); padding:.6rem; } .card-cover img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,80,90,.18)); } .card-body { padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.4rem; flex:1; } .card-title { font-size:1.08rem; margin:0; } .card-hook { font-size:.9rem; color:var(--muted); margin:0; flex:1; } .card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; } .card-age { font-size:.78rem; font-weight:700; color:var(--teal-dark); } .card-price { font-weight:700; color:#3a2c00; background:var(--yellow); padding:.15rem .55rem; border-radius:999px; font-size:.85rem; } /* product page */ .product { max-width:var(--maxw); margin:0 auto; padding:.5rem 1.25rem 1rem; } .back { display:inline-block; margin:.5rem 0 1rem; font-weight:700; text-decoration:none; } .p-top { display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start; } .p-media { display:flex; flex-direction:column; gap:1rem; } .p-cover { width:100%; border-radius:14px; background:var(--cream); box-shadow:0 10px 30px rgba(0,80,90,.16); border:1px solid var(--line); } .p-gallery { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; } .gallery-label { font-size:.82rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:.4rem; } .shot { width:100%; border-radius:12px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); } .p-info { position:sticky; top:1rem; } .p-title { font-size:clamp(1.5rem,3.5vw,2.1rem); } .p-meta { margin-bottom:.6rem; } .pill { font-size:.8rem; font-weight:700; color:var(--teal-dark); background:#e2f1f2; padding:.3rem .7rem; border-radius:999px; } .p-price { font-size:1.5rem; font-weight:700; color:#3a2c00; margin:.3rem 0; } .p-hook { color:#454545; font-size:1.05rem; } .p-note { font-size:.85rem; color:var(--muted); } /* freebie placeholder */ .freebie-soon { max-width:640px; margin:3rem auto; padding:0 1.25rem; text-align:center; } .freebie-soon h1 { font-size:clamp(1.6rem,4vw,2.4rem); } .freebie-soon p { color:#454545; } @media (max-width:760px) { .hero { grid-template-columns:1fr; text-align:center; } .hero-sub { max-width:none; } .hero-art { order:-1; } .hero-art img { max-height:220px; } .p-top { grid-template-columns:1fr; } .p-info { position:static; } }