/* ═══════════════════════════════════════════════════════ DandyLine Brand Guide — Shared Stylesheet Used by all 9 detail pages + the master hub. Source of truth for layout, nav, cards, and type. ═══════════════════════════════════════════════════════ */ /* ── Google Fonts are loaded in each HTML file's ── */ /* ── CSS Variables ── */ :root { /* 12 official brand colors */ --gold: #D4A853; --gold-lt: #F0C96A; --gold-dk: #A07830; --cream: #F5F0E8; --oat: #C8B89A; --sky: #8BAEC8; --sage: #7A9E7E; --purple: #6B5B8A; --amber: #C4704A; --pink: #C48CA0; --navy: #0B1520; --bg: #020710; /* Text opacity scale — all cream-based */ --tb: rgba(245,240,232,.93); /* body text */ --tm: rgba(245,240,232,.68); /* mid / secondary */ --td: rgba(245,240,232,.42); /* dim / labels */ --tvd: rgba(245,240,232,.18); /* very dim / decorative */ } /* ── Reset ── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { overflow-x: hidden; scroll-behavior: smooth; /* smooth scroll for anchor links */ scroll-padding-top: 72px; /* offset for sticky nav + breathing room */ } body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--cream); min-height: 100vh; } /* ════════════════════════════════════════════════════════ TOP NAVIGATION BAR Links to all 9 detail pages + hub. Stays at top always. ════════════════════════════════════════════════════════ */ .brand-topnav { position: sticky; top: 0; z-index: 100; background: rgba(2,7,16,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); padding: 0 24px; display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; } .brand-topnav::-webkit-scrollbar { display:none; } .topnav-logo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; color: var(--gold); text-decoration: none; padding: 10px 16px 10px 0; flex-shrink: 0; border-right: 1px solid rgba(255,255,255,.07); margin-right: 4px; white-space: nowrap; display: flex; align-items: center; gap: 9px; } /* Mini icon canvas in nav */ .topnav-logo canvas { display: block; flex-shrink: 0; opacity: .92; } /* Wordmark: "Dandy" gold + "Line" dim, tight as one word */ .topnav-wordmark { letter-spacing: -.01em; white-space: nowrap; } .topnav-line { font-weight: 400; color: var(--tm); } .topnav-section-label { font-family: 'Outfit', sans-serif; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tvd); padding: 3px 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; flex-shrink: 0; } .topnav-link { font-family: 'Outfit', sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--td); text-decoration: none; padding: 14px 12px; border-bottom: 2px solid transparent; flex-shrink: 0; white-space: nowrap; transition: color .2s, border-color .2s; } .topnav-link:hover { color: var(--tm); border-bottom-color: rgba(212,168,83,.3); } .topnav-link.active { color: var(--gold); border-bottom-color: var(--gold); } .topnav-link.inactive { color: var(--tvd); cursor: default; pointer-events: none; } /* ════════════════════════════════════════════════════════ PAGE HEADER ════════════════════════════════════════════════════════ */ .page-hd { text-align: center; padding: 52px 40px 28px; border-bottom: 1px solid rgba(255,255,255,.04); position: relative; } .page-hd::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,83,.06), transparent 65%); pointer-events: none; } .ph-eyebrow { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--td); margin-bottom: 10px; } .ph-title { font-family: 'Syne', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -.01em; background: linear-gradient(135deg, var(--gold-lt), var(--gold), var(--oat)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; } .ph-sub { font-size: 11.5px; color: var(--tm); max-width: 520px; margin: 0 auto; line-height: 1.8; } /* Spec chips — key facts + section quick-jump anchors */ .ph-specs { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .spec-chip { font-family: 'Outfit', sans-serif; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 13px; border-radius: 20px; border: 1px solid rgba(212,168,83,.2); color: var(--oat); background: rgba(212,168,83,.05); white-space: nowrap; text-decoration: none; display: inline-block; cursor: default; transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .12s; } /* When the chip is an anchor link ( tag), show pointer + hover effect */ a.spec-chip { cursor: pointer; } a.spec-chip:hover { transform: translateY(-1px); } /* Default (oat) hover */ a.spec-chip:hover { color: var(--cream); background: rgba(200,184,154,.1); border-color: rgba(200,184,154,.35); box-shadow: 0 0 10px rgba(200,184,154,.12), 0 2px 8px rgba(0,0,0,.3); } /* Gold chip */ .spec-chip.gold { border-color:rgba(212,168,83,.28); color:var(--gold); background:rgba(212,168,83,.07); } a.spec-chip.gold:hover { color: var(--gold-lt); background: rgba(212,168,83,.14); border-color: rgba(212,168,83,.5); box-shadow: 0 0 14px rgba(212,168,83,.2), 0 0 4px rgba(240,201,106,.15), 0 2px 8px rgba(0,0,0,.3); } /* Sky chip */ .spec-chip.sky { border-color:rgba(139,174,200,.25); color:var(--sky); background:rgba(139,174,200,.06); } a.spec-chip.sky:hover { color: #A8C8E0; background: rgba(139,174,200,.13); border-color: rgba(139,174,200,.45); box-shadow: 0 0 14px rgba(139,174,200,.18), 0 2px 8px rgba(0,0,0,.3); } /* Sage chip */ .spec-chip.sage { border-color:rgba(122,158,126,.25); color:var(--sage); background:rgba(122,158,126,.06); } a.spec-chip.sage:hover { color: #96BF9A; background: rgba(122,158,126,.13); border-color: rgba(122,158,126,.45); box-shadow: 0 0 14px rgba(122,158,126,.18), 0 2px 8px rgba(0,0,0,.3); } /* Oat chip */ .spec-chip.oat { border-color:rgba(200,184,154,.22); color:var(--oat); background:rgba(200,184,154,.05); } a.spec-chip.oat:hover { color: var(--cream); background: rgba(200,184,154,.11); border-color: rgba(200,184,154,.38); box-shadow: 0 0 14px rgba(200,184,154,.15), 0 2px 8px rgba(0,0,0,.3); } /* ════════════════════════════════════════════════════════ SECTION SCAFFOLDING ════════════════════════════════════════════════════════ */ .brand-section { max-width: 1040px; margin: 0 auto; padding: 52px 32px 16px; } .section-hd { display: flex; align-items: flex-start; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 32px; } .sh-num { font-size: 10px; letter-spacing: .18em; color: var(--tvd); padding-top: 3px; flex-shrink: 0; min-width: 24px; } .sh-title { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 600; color: var(--tb); letter-spacing: -.005em; margin-bottom: 4px; } .sh-desc { font-size: 11px; color: var(--td); line-height: 1.75; max-width: 560px; } /* ════════════════════════════════════════════════════════ CARD SYSTEM ════════════════════════════════════════════════════════ */ .card-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; } .card-grid.wide { grid-template-columns:1fr; } .card-grid.thirds { grid-template-columns:1fr 1fr 1fr; } .card-grid.fourths { grid-template-columns:1fr 1fr 1fr 1fr; } .bcard { background: rgba(11,21,32,.7); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 26px 22px 18px; position: relative; overflow: hidden; } .bcard::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: radial-gradient(ellipse at 30% 0%, rgba(212,168,83,.03), transparent 60%); pointer-events: none; } /* Card variants */ .bcard.hero { border-color: rgba(212,168,83,.12); } .bcard.hero::before{ background: radial-gradient(ellipse at 40% 0%, rgba(212,168,83,.055), transparent 65%); } .bcard.light { background: #F0EBE0; border-color: rgba(0,0,0,.07); } .bcard.light::before { background: radial-gradient(ellipse at 30% 0%, rgba(212,168,83,.06), transparent 60%); } .bcard.sage-tint { border-color: rgba(122,158,126,.15); } .bcard.sky-tint { border-color: rgba(139,174,200,.15); } .bcard.gold-tint { border-color: rgba(212,168,83,.18); background: rgba(11,21,32,.85); } .bcard.dont { border-color: rgba(180,80,80,.18); background: rgba(180,80,80,.04); } .bcard.navy-mid { background: rgba(11,21,32,.5); } .card-lbl { font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--td); margin-bottom: 16px; } .bcard.light .card-lbl { color: rgba(0,0,0,.3); } .lbl-do { color: var(--sage) !important; } .lbl-dont { color: #C47070 !important; } .card-note { font-size: 10px; color: var(--td); line-height: 1.65; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.04); } .bcard.light .card-note { color:rgba(11,21,32,.45); border-top-color:rgba(0,0,0,.07); } .divider { height:1px; background:rgba(255,255,255,.04); margin:16px 0; } /* ════════════════════════════════════════════════════════ TYPOGRAPHY HELPERS ════════════════════════════════════════════════════════ */ .syn { font-family: 'Syne', sans-serif; } .w400 { font-weight: 400; } .w500 { font-weight: 500; } .w600 { font-weight: 600; } .w700 { font-weight: 700; } .w800 { font-weight: 800; } .c-gold { color: var(--gold); } .c-gold-dk { color: var(--gold-dk); } .c-dim { color: var(--tm); } .c-vdim { color: rgba(245,240,232,.38); } .c-cream { color: var(--cream); } .c-oat { color: var(--oat); } /* ════════════════════════════════════════════════════════ LOCKUP HELPERS ════════════════════════════════════════════════════════ */ .lk-h { display: flex; align-items: center; gap: var(--g, 14px); } .lk-v { display: flex; flex-direction: column; align-items: center; gap: var(--g, 10px); text-align: center; } .tl-wrap { display:flex; flex-direction:column; gap:2px; } .tl1 { font-family:'Outfit',sans-serif; font-weight:300; letter-spacing:.1em; color:var(--td); } .tl2 { font-family:'Outfit',sans-serif; font-weight:500; letter-spacing:.1em; color:var(--tm); } .tl2 .tg { color:var(--gold); } /* ════════════════════════════════════════════════════════ ICON + APP ICON ROWS ════════════════════════════════════════════════════════ */ .icon-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 18px 0 4px; } .icon-item { display:flex; flex-direction:column; align-items:center; gap:7px; } .icon-sz { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: var(--tvd); } .bcard.light .icon-sz { color:rgba(0,0,0,.25); } .app-icon-row { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; padding:14px 0 4px; } .ic-stack { display:flex; flex-direction:column; align-items:center; gap:8px; } .ic-lbl { font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--tvd); } /* ════════════════════════════════════════════════════════ TREATMENT STRIPS ════════════════════════════════════════════════════════ */ .treatment-strip { display: flex; gap: 0; background: rgba(11,21,32,.65); border: 1px solid rgba(255,255,255,.06); border-radius: 18px; overflow: hidden; margin-bottom: 14px; } .tx-col { flex:1; padding:22px 16px; border-right:1px solid rgba(255,255,255,.05); } .tx-col:last-child { border-right:none; } .tx-col.light-col { background:#F0EBE0; } .tx-label { font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--td); margin-bottom:12px; } .tx-col.light-col .tx-label { color:rgba(0,0,0,.3); } .tx-desc { font-size:9.5px; color:var(--td); line-height:1.6; margin-top:10px; } .tx-col.light-col .tx-desc { color:rgba(11,21,32,.4); } /* ════════════════════════════════════════════════════════ WORDMARK SIZE ROW ════════════════════════════════════════════════════════ */ .wm-row { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; padding:8px 0 4px; } .wm-item { display:flex; flex-direction:column; gap:5px; } /* ════════════════════════════════════════════════════════ USAGE RULE LISTS ════════════════════════════════════════════════════════ */ .rule-list { font-size:11px; color:var(--tm); line-height:2.1; padding-top:6px; } .rule-list li { list-style:none; padding-left:18px; position:relative; } .rule-list li::before { position:absolute; left:0; font-weight:600; } .rule-list.do li::before { content:'✓'; color:var(--sage); } .rule-list.dont li::before { content:'✗'; color:#C47070; } /* ════════════════════════════════════════════════════════ TABLES ════════════════════════════════════════════════════════ */ .brand-table { width:100%; border-collapse:collapse; margin-top:10px; font-size:10.5px; } .brand-table th { font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--td); font-weight:500; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; } .brand-table td { padding:8px 10px; color:var(--tm); border-bottom:1px solid rgba(255,255,255,.03); } .brand-table tr:last-child td { border-bottom:none; } .brand-table td:first-child { color:var(--tb); font-weight:500; } .brand-table .cell-gold { color:var(--gold); } /* ════════════════════════════════════════════════════════ CONTEXT GRIDS (2×2 use-case cards) ════════════════════════════════════════════════════════ */ .context-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; } .ctx-card { padding:14px 16px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; } .ctx-label { font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; } .ctx-body { font-size:10.5px; color:var(--td); line-height:1.75; } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ .brand-footer { text-align: center; padding: 40px 40px 56px; font-size: 10px; color: var(--tvd); letter-spacing: .1em; border-top: 1px solid rgba(255,255,255,.04); margin-top: 40px; line-height: 2; } /* ════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════ */ @media (max-width: 700px) { .brand-section { padding: 36px 16px 12px; } .page-hd { padding: 36px 20px 20px; } .lk-h { flex-wrap: wrap; } canvas { max-width:100%; aspect-ratio:1/1; } .treatment-strip { flex-direction:column; } .tx-col { border-right:none; border-bottom:1px solid rgba(255,255,255,.05); } .tx-col:last-child { border-bottom:none; } .card-grid, .card-grid.thirds, .card-grid.fourths { grid-template-columns:1fr; } .icon-row { gap:12px; } .context-grid { grid-template-columns:1fr; } .brand-topnav { padding:0 16px; } .topnav-link { padding:12px 8px; font-size:9px; } }