/* ============================================================ dc-brand.css — Direct Create brand BASE for any HTML surface ------------------------------------------------------------ Link this one file (it pulls in colors_and_type.css) and a plain HTML page inherits the brand: spine colours, the type families, square corners, flat fills, schema accents. Set a schema on the root: . Drop-in: Light-mode only by design (the brand has no dark theme switch). ============================================================ */ @import url('colors_and_type.css'); :root{ color-scheme: light; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-serif); /* reading body is the serif */ font-size:var(--step-body); line-height:1.6; } /* Headings are the grotesque, tight and confident. Square corners everywhere. */ h1,h2,h3,h4,h5,h6{ font-family:var(--font-grotesque); font-weight:var(--w-black); letter-spacing:var(--track-tight); line-height:0.95; margin:0 0 var(--space-3); color:var(--ink); } h1{ font-size:var(--step-h1); } h2{ font-size:var(--step-h2); } h3{ font-size:var(--step-h3); } p{ margin:0 0 var(--space-3); } a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; } a:hover{ color:var(--accent); } /* Kill rounding, shadows, and tints globally — the brand is flat. */ *,*::before,*::after{ border-radius:0 !important; box-shadow:none !important; } hr{ border:none; border-top:var(--rule-bold); margin:var(--space-5) 0; } /* Spaced uppercase kicker / label */ .dc-kicker{ font-family:var(--font-grotesque); font-weight:var(--w-bold); font-size:var(--step-cap); text-transform:uppercase; letter-spacing:var(--track-wide); color:var(--ink); } .dc-kicker .idx{ color:var(--accent); } /* Hero grotesque + editorial serif display helpers */ .dc-hero{ font-family:var(--font-grotesque); font-weight:var(--w-black); font-size:var(--step-hero); line-height:0.9; letter-spacing:var(--track-tight); text-transform:uppercase; } .dc-display-serif{ font-family:var(--font-display-serif); font-weight:var(--w-bold); font-size:var(--step-h1); line-height:1.02; } /* Accent surfaces obey the contrast rule via --accent-on */ .dc-accent-panel{ background:var(--accent); color:var(--accent-on); padding:var(--space-4) var(--space-5); } .dc-rule-accent{ border:none; border-top:var(--rule-accent); } /* Buttons: hard colour swap on hover, never opacity */ .dc-btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-grotesque); font-weight:var(--w-bold); font-size:var(--step-cap); text-transform:uppercase; letter-spacing:0.08em; padding:14px 24px; border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; } .dc-btn:hover{ background:var(--accent); color:var(--accent-on); border-color:var(--accent); } .dc-btn-ghost{ background:transparent; color:var(--ink); } .dc-btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); } /* Focus: 2px solid, square */ :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }