/* Ladi Luck Foundation design tokens. The only file in the codebase holding raw color, font and pixel values. Everything else references these names. Two registers, one system. The register is set with data-register on the element and only swaps the display face and the accent fill. The palette, type scale and spacing are shared, which is what keeps the two registers reading as one site. */ :root { /* ---------- Color ---------- */ --purple: #B68ACC; /* foundation surfaces, sponsor and donor pages */ --pink: #E8447A; /* drive only, slab fills and buttons */ --cream: #F2F0E9; /* page background everywhere */ --ink: #1C1A1B; /* all body copy */ /* Contrast guard rails, measured not guessed. See the style guide. purple on cream is 2.46:1 and pink on cream is 3.32:1, so neither is a text color on cream. Both are fills that carry ink type on top. */ --text-on-cream: var(--ink); /* 15.18:1 */ --text-on-purple: var(--ink); /* 6.18:1 */ --text-on-pink: var(--ink); /* 4.57:1 */ /* ---------- Font families ---------- */ --font-foundation: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; --font-heading: "Oswald", "Helvetica Neue", Arial, sans-serif; --font-drive: "Kalam", "Bradley Hand", cursive; --font-body: "Jost", "Helvetica Neue", Arial, sans-serif; /* Bebas Neue ships one weight, so the foundation display face cannot be made heavier or lighter. Oswald carries the weights instead. */ --weight-display: 400; --weight-heading: 600; --weight-drive: 700; --weight-display-soft: 500; --weight-body: 400; --weight-label: 500; /* ---------- Type scale ---------- */ --size-hero: 56px; /* drive display, floor for the drive face is 28px */ --size-h1: 36px; /* 36px mobile, 48px desktop below */ --size-h2: 32px; --size-h3: 22px; --size-body: 17px; --size-label: 13px; /* The drive face is never rendered below this. Anything smaller falls back to --font-foundation. */ --marker-min: 28px; --leading-display: 1.05; --leading-body: 1.7; /* Bebas Neue is already narrow and tightly spaced, so display type opens up slightly rather than closing up. */ --tracking-display: 0.02em; --tracking-heading: 0.02em; --tracking-drive: 0; --tracking-label: 0.08em; /* ---------- Spacing ---------- Base unit 8px. Every spacing value below is a multiple of it. */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-6: 48px; --space-8: 64px; --space-10: 80px; --space-12: 96px; --section-pad: var(--space-6); /* 48px mobile, 96px desktop below */ --content-max: 1100px; --measure: 68ch; /* ---------- Pink slab ---------- 12 and 20 are the specified values and are deliberately off the 8px grid. The overhang matches the horizontal padding so the display text optically aligns with the column while the fill hangs past it. */ --slab-pad-y: 12px; --slab-pad-x: 20px; --slab-overhang: var(--slab-pad-x); /* ---------- Component dimensions ---------- Derived from the spacing scale so component CSS never needs a raw pixel value of its own. */ --border-hair: 1px; --border-thick: 2px; --focus-ring: 3px; --focus-offset: 2px; --logo-size: var(--space-8); /* 64px, square mark */ --map-min: calc(var(--space-12) * 3); /* 288px */ --map-max: calc(var(--space-3) * 15); /* 360px, map width cap */ --tap-target: var(--space-8); /* 64px, minimum touch size */ --avatar-size: var(--space-4); /* 32px, nav avatar */ --avatar-ring: var(--border-thick); /* 2px */ --avatar-gap: var(--space-1); /* 8px, avatar to About */ /* Scroll reveal on the home page bands. Deliberately small. The rise is one step on the spacing scale and the fade does most of the work, so it reads as the page settling rather than as an animation. */ --reveal-rise: var(--space-5); /* 40px */ --reveal-duration: 900ms; --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* plain ease out */ --reveal-delay: 0ms; /* room to stagger */ --photo-slot: calc(var(--space-12) + var(--space-4)); /* 128px, square card slot */ --seam-height: var(--space-1); /* drive section seam */ --stat-min: calc(var(--space-12) * 2); /* 192px, stat block floor */ --stop-min: calc(var(--space-10) * 3); /* 240px, stop card floor */ /* 160px. Not the giving options any more, which size themselves off --give-row below. It is still the floor the staff screen's confirm buttons share a row by, so it stays. */ --give-min: calc(var(--space-10) * 2); /* Where the giving options stop sharing a row and stack instead. It is the width of the row itself, not of the viewport: the Donate band is one column below 768 and two above it, so the row is 696px wide at a 744px viewport and 475px at 872px, and a viewport breakpoint would read that backwards. Measured: an option narrower than 177px runs its label to a third line, so three plus two gaps need 563px. Rounded up for slack, and still under the 612px the band's text column tops out at, so the widest case stays a row. */ --give-row: calc(var(--space-12) * 6); /* 576px, three across */ --bar-height: var(--space-2); /* 16px, progress bar */ /* Drive decoration. The chunky slab outline and the three shape sizes for the festive treatment, all off the spacing scale. */ --border-chunky: calc(var(--border-thick) * 2); /* 4px, slab outline */ --decor-sm: var(--space-3); /* 24px */ --decor-md: var(--space-5); /* 40px */ --decor-lg: var(--space-8); /* 64px */ --decor-xl: var(--space-12); /* 96px */ /* Band rhythm. The inside gap is deliberately much smaller than the space between bands, so an image and its text read as one unit rather than as two items in a list. --band-space follows --section-pad, so it loosens at the same breakpoint everything else does. */ --band-gap: var(--space-4); /* 32px inside a band */ --band-space: calc(var(--section-pad) + var(--space-6));/* 144px desktop, 96px mobile */ /* Very light pink ground for alternating drive sections. Mixed from the pink token, so there is no second pink to keep in sync. */ --pink-tint: color-mix(in srgb, var(--pink) 8%, var(--cream)); /* Same 8% pink, mixed with transparent instead of cream. Over the cream ground it composites to exactly --pink-tint, but it lets the drive falling layer show through the banded sections instead of hiding it. */ --pink-veil: color-mix(in srgb, var(--pink) 8%, transparent); /* ---------- Register defaults: foundation ---------- */ --display-font: var(--font-foundation); --display-weight: var(--weight-display); --display-tracking: var(--tracking-display); --accent: var(--purple); --text-on-accent: var(--text-on-purple); } /* Drive register. Kalam display and pink fills. */ [data-register="drive"] { --display-font: var(--font-drive); --display-weight: var(--weight-drive); --display-tracking: var(--tracking-drive); --accent: var(--pink); --text-on-accent: var(--text-on-pink); } /* Foundation register, stated explicitly so the attribute can be set on any page rather than relying on the :root default. */ [data-register="foundation"] { --display-font: var(--font-foundation); --display-weight: var(--weight-display); --display-tracking: var(--tracking-display); --accent: var(--purple); --text-on-accent: var(--text-on-purple); } @media (min-width: 768px) { :root { --section-pad: var(--space-12); /* 96px desktop */ /* At 48px the single word FOUNDATION is wider than the content column on a 320px screen and forces the page to scroll sideways. */ --size-h1: 48px; } }