/* ============================================================================ VISION BOARD — FLORIDA DEALZ A monthly digital advertising publication · Demo build ============================================================================ Personality: Warm / Friendly-commercial. A deals paper should feel generous and neighbourly — the community bulletin board, not the flyer wedged under your wiper. Loud where it counts, soft everywhere else. Follows the seniorvoicefl.com reference the client sent: cream stock, thick outlined boxes, a postcard sensibility. Colors: Hand-painted roadside signage on warm cream stock. Coral (#F2603C) primary — price tags, CTAs, headline accents. Amber (#F5B33F) accent — stamps, badges, highlights. Olive (#7C8B6B) — the friendly secondary, quiet supporting note. Teal (#17595C) — nav, dark bands, footer. Carries every accessible dark surface so coral never has to be body text. Cream (#FBF2E2) page background. Warm near-black ink (#241C16). Fonts: Fraunces 500-800 — display. A soft, slightly wonky serif; the SOFT and WONK axes are literally the friendliness dial, and it reads as a real publication rather than a SaaS landing page. Caveat — handwritten accents only, used sparingly for postcard flourishes. Never for anything a reader must be able to read. Public Sans 400-600 — body and UI. DM Mono — coupon codes, expiry dates, phone numbers. Earns its place by giving every offer a receipt/coupon texture. Hero: Cover-forward. The current issue's cover sits large and lightly tilted with one dominant "Read this month's issue" CTA. Image style: Bright, high-sun Florida documentary. Real storefronts, real trades, real food. Nothing stocky or corporate. Warm exposure. Animation: Energetic but controlled. ~450ms reveals, confident easing, no drifting or floating. Motion should feel like a page turn. Contact: Split — form left, direct contact + deadlines right. FAQ: Accordion, single-column, generous hit targets. Card style: 3px solid --line, 18px radius, cream or white fill, flat by default. The thick dark outline IS the design — it is what makes a page of boxes read as friendly rather than corporate. Hover swaps the border to coral and lifts on a soft shadow. Coupon cards get a dashed edge and punched notches. Components: Container Scroll Animation (homepage issue reveal), Animated Blur Number (stats band + advertise reach), Background Paths (dark teal stats + CTA), Display Cards (advertise.html ad-size stack). Vibe: "The friendliest thing in the mailbox — thick-lined, warm and hand-made, loud enough to stop you and open enough to trust." NOTE — Danichi Client Work Firewall: no #F07830, no Outfit + DM Serif, and no 3px-border + 6px-zero-blur-offset-shadow signature. Thick borders are used here at the client's explicit request, but paired with SOFT warm shadows, so the Danichi product signature is not reproduced. Structure reused, values are this client's own. ============================================================================ */ :root { /* ---- Brand ---- */ --coral: #F2603C; /* softened from neon — friendlier, still loud */ --coral-dark: #C4431F; /* AA-safe coral for text on sand */ --coral-pale: #FDEAE2; --citrus: #F5B33F; /* warm amber, closer to a painted sign */ --citrus-pale: #FDF0D8; --sage: #7C8B6B; /* friendly olive — secondary accent */ --sage-pale: #EAEEE3; --teal: #17595C; --teal-2: #0E4245; --teal-pale: #E2EDEC; /* ---- Neutrals ---- */ --sand: #FBF2E2; /* warmer cream stock */ --sand-2: #F4E7CE; --paper: #FFFCF4; /* flipbook page stock */ --ink: #241C16; --muted: #6F6357; --line: #2E241C; /* THE thick outline colour — warm near-black */ --rule: #DCCBAF; /* hairlines and internal dividers only */ --rule-strong: #C4AF8D; --white: #FFFFFF; /* ---- Type ---- */ --font: "Public Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; --script: "Caveat", "Segoe Script", cursive; --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ---- Scale ---- */ --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem); --step-1: clamp(1.25rem, 1.17rem + 0.40vw, 1.48rem); --step-2: clamp(1.56rem, 1.41rem + 0.75vw, 2.02rem); --step-3: clamp(1.95rem, 1.69rem + 1.30vw, 2.75rem); --step-4: clamp(2.44rem, 2.00rem + 2.20vw, 3.75rem); --step-5: clamp(3.05rem, 2.32rem + 3.65vw, 5.11rem); /* ---- Space ---- */ --sp-1: 0.5rem; --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4.5rem; --sp-7: 7rem; /* ---- Shape ---- Thick, confident outlines are the whole personality here. Cards are drawn with --bw in --line, the way a boxed newspaper ad or a postcard is. The ladder exists so weight stays deliberate: 3px cards, 2px controls and nested elements, 1px hairline dividers inside a card. */ --r-sm: 10px; --r: 18px; --r-lg: 26px; --r-pill: 999px; --bw: 3px; /* cards, panels, the outer box of anything */ --bw-2: 2px; /* buttons, inputs, chips, nested boxes */ /* ---- Elevation ---- Soft and warm. Deliberately NOT a hard zero-blur offset — that is the Danichi product signature and is off-limits on client work. Thickness does the work here; shadow only lifts on hover. */ --sh-1: 0 2px 0 rgba(46,36,28,.06), 0 4px 14px rgba(46,36,28,.06); --sh-2: 0 4px 18px rgba(46,36,28,.10), 0 12px 34px rgba(46,36,28,.08); --sh-3: 0 10px 26px rgba(46,36,28,.12), 0 34px 70px rgba(46,36,28,.14); /* ---- Photography ---- Every content photo in the site takes this one grade. The set comes from many different photographers; without a shared grade it reads as stock. With it, it reads as one sunny afternoon's shoot. Warm, slightly faded, a touch of contrast back in. The wash is a single amber multiply for ALL photos. (Each ad previously got its own coral/amber/teal tint, which is exactly what made the set look unmatched.) */ --photo-grade: saturate(.86) sepia(.18) contrast(1.06) brightness(1.03); --photo-wash: #F5B33F; --photo-wash-opacity: .16; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.55, 0, 1, 0.45); --dur: 450ms; --dur-fast: 220ms; /* ---- Layout ---- */ --wrap: 1200px; --wrap-narrow: 780px; --header-h: 72px; } @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; --dur-fast: 1ms; } }