/* ============================================================ KSHN Pouch Co. — Design System: tokens, reset, type, layout ============================================================ */ /* Fonts are loaded via + stylesheet in the public layout (parallel, non-blocking) instead of a render-blocking @import. */ :root { /* --- Sky base (the canvas) — bright sky blue --- */ --sky1: #5BB9C3; --sky2: #40AFCB; --sky3: #109FD7; --sky-grad: linear-gradient(160deg, #5BB9C3 0%, #40AFCB 48%, #109FD7 100%); --sky-grad-v: linear-gradient(180deg, #6FC3CC 0%, #40AFCB 50%, #0E96CF 100%); /* --- Sunset (LOGO + warm accent only, never an all-over wash) --- */ --crimson: #BF2029; --burnt: #E78728; --peach: #FBB154; --sunset-warm: linear-gradient(120deg, #BF2029, #E78728 55%, #FBB154); --sunset: linear-gradient(180deg, #00DEF5 0%, #10ACE3 16%, #5AC6D0 30%, #FBB154 60%, #E78728 82%, #BF2029 100%); /* logo mark only */ /* --- Cloud accent palette (energy: squiggles, tags, icon strokes, glows) --- */ --c-lime:#D4DB3D; --c-sky:#70BAE1; --c-orange:#FF771F; --c-magenta:#D82D7C; --c-green:#8FC25B; --c-emerald:#27AA4A; --c-teal:#11A487; --c-forest:#1B7E3E; --c-purple:#AA1F84; --c-gold:#F6A50E; --c-aqua:#00B1BF; --c-sage:#B2CEBF; /* --- Neutrals (clean/premium: white + warm cream + near-black ink) --- */ --ink: #10222B; /* near-black, cool */ --ink-soft: #5A6B73; /* cool detail gray */ --paper: #FFFFFF; /* clean white */ --paper-2: #F6F3EC; /* warm cream (alt sections) */ --charcoal: #0C2C34; /* deep teal-charcoal (dark sections) */ --night: #08323B; /* deep teal (science section) */ --line: #E8E3D8; /* warm hairline */ --line-dark: rgba(255,255,255,.14); /* legacy aliases (kept so existing rules resolve) */ --sky: #109FD7; --teal: #11A487; --aqua: #00B1BF; /* Active flavor gradient (themed per flavor; appears on flavor cards/pages only) */ --f1: #b52892; --f2: #fe2389; --f3: #ff9120; --f4: #fab80b; --flavor: linear-gradient(135deg, var(--f1), var(--f2) 38%, var(--f3) 72%, var(--f4)); --flavor-soft: linear-gradient(135deg, color-mix(in srgb, var(--f1) 14%, #fff), color-mix(in srgb, var(--f4) 14%, #fff)); /* --- Type --- */ --display: 'Space Grotesk', system-ui, sans-serif; --body: 'Manrope', system-ui, sans-serif; /* --- Radius --- */ --r-sm: 10px; --r-md: 18px; --r-lg: 28px; --r-xl: 40px; --r-shelf: 44px; /* rounded section "shelf" tops */ --r-pill: 999px; /* --- Spacing rhythm --- */ --pad-x: clamp(20px, 5vw, 80px); --sect-y: clamp(64px, 9vw, 140px); /* --- Elevation --- */ --sh-sm: 0 2px 8px rgba(40,20,0,.06); --sh-md: 0 14px 40px -16px rgba(60,30,0,.28); --sh-lg: 0 40px 90px -30px rgba(40,20,0,.45); --maxw: 1240px; --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--body); background: var(--paper); color: var(--ink); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Type scale ---------- */ h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } .display { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 8.5vw, 6.2rem); line-height: 0.94; letter-spacing: -0.035em; } .h1 { font-size: clamp(2.1rem, 5.6vw, 4rem); } .h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); } .h3 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); } .lead { font-size: clamp(1.08rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-soft); font-weight: 500; text-wrap: pretty; } p { text-wrap: pretty; } .eyebrow { font-family: var(--body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.74rem; color: var(--burnt); display: inline-flex; align-items: center; gap: 0.55em; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--flavor, var(--sunset-warm)); border-radius: 2px; } .tm { font-size: 0.6em; vertical-align: super; font-weight: 600; opacity: .8; } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: var(--sect-y); } .stack { display: flex; flex-direction: column; } .center { text-align: center; } .muted { color: var(--ink-soft); } /* Rounded "shelf" — a section that overlaps the previous with a soft top */ .shelf { border-top-left-radius: var(--r-shelf); border-top-right-radius: var(--r-shelf); margin-top: calc(var(--r-shelf) * -1); position: relative; z-index: 2; } /* Gradient text */ .grad-text { background: var(--sunset-warm); -webkit-background-clip: text; background-clip: text; color: transparent; } .flavor-text { background: var(--flavor); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Reveal-on-scroll (RISE) ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal-l { opacity: 0; transform: translateX(-24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal-r { opacity: 0; transform: translateX(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in, .reveal-l.in, .reveal-r.in { opacity: 1; transform: none; } .reveal.d1, .reveal-l.d1, .reveal-r.d1 { transition-delay: .08s; } .reveal.d2, .reveal-l.d2, .reveal-r.d2 { transition-delay: .16s; } .reveal.d3, .reveal-l.d3, .reveal-r.d3 { transition-delay: .24s; } .reveal.d4, .reveal-l.d4, .reveal-r.d4 { transition-delay: .32s; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-l, .reveal-r { opacity: 1 !important; transform: none !important; transition: none; } } /* Sharp editorial block — the "Swiss rule" half of the shape grammar (sharp blocks vs pill controls) */ .edge { border-radius: 0; border: 1px solid var(--line); } /* below-the-fold sections skip layout/paint until approached (NOT for pinned/sticky sections — it breaks the pin) */ .cv-auto { content-visibility: auto; contain-intrinsic-size: auto 640px; } /* ---------- Image placeholders (aspect-correct) ---------- */ .ph { position: relative; border-radius: var(--r-md); background: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 12px, transparent 12px 24px), var(--flavor-soft, var(--paper-2)); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; } .ph[data-dark] { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px), rgba(255,255,255,.04); border-color: var(--line-dark); } .ph .ph-label { font-family: var(--body); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); background: rgba(255,255,255,.72); padding: .35em .7em; border-radius: var(--r-pill); backdrop-filter: blur(4px); } .ph[data-dark] .ph-label { color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); } .r-1x1 { aspect-ratio: 1 / 1; } .r-2x3 { aspect-ratio: 2 / 3; } .r-3x2 { aspect-ratio: 3 / 2; } .r-4x3 { aspect-ratio: 4 / 3; } .r-16x9 { aspect-ratio: 16 / 9; } /* Swatch row (flavor gradient stops) */ .swatches { display: flex; gap: 5px; } .swatches i { width: 16px; height: 16px; border-radius: 5px; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; } /* remove the mobile double-tap-zoom delay on every interactive element */ a, button, input, select, textarea, [role="button"] { touch-action: manipulation; }