/** Shopify CDN: Minification failed Line 667:25 Unexpected "*" **/ /* ============================================ CULTURE DROPS — SHOPIFY DAWN CUSTOM CSS Brandbook V1 / 2026 ============================================ */ /* ----------------------------------------------- 1. COLOR SYSTEM: CSS Variables ----------------------------------------------- */ :root { /* Core Neon Palette */ --color-acid: #00FF00; --color-hyper: #00E5FF; --color-synth: #B200FF; --color-volt: #CCFF00; /* Dynamic Brand Color — change per season or via JS switcher */ --color-brand: var(--color-acid); /* Base Colors */ --color-asphalt: #111111; --color-pure: #FFFFFF; --color-bg: #F4F4F0; /* Font Stacks */ --font-headline: 'Syne', sans-serif; --font-body: 'Space Mono', monospace; } /* Theme Switcher Classes (set on ) */ html.theme-acid { --color-brand: var(--color-acid); } html.theme-hyper { --color-brand: var(--color-hyper); } html.theme-synth { --color-brand: var(--color-synth); } html.theme-volt { --color-brand: var(--color-volt); } /* ----------------------------------------------- 2. GLOBAL BASE STYLES ----------------------------------------------- */ body { background-color: var(--color-bg); color: var(--color-asphalt); font-family: var(--font-body); background-image: linear-gradient(90deg, transparent 60px, rgba(217,4,41,0.4) 60px, rgba(217,4,41,0.4) 62px, transparent 62px), linear-gradient(rgba(17,17,17,0.1) 1px, transparent 1px); background-size: 100% 32px; background-attachment: local; } ::selection { background: var(--color-brand); color: var(--color-asphalt); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } /* Override Dawn's default body font */ .shopify-section * { font-family: var(--font-body); } /* ----------------------------------------------- 3. UTILITY CLASSES — Color ----------------------------------------------- */ .text-acid { color: var(--color-acid); } .bg-acid { background-color: var(--color-acid); } .text-hyper { color: var(--color-hyper); } .bg-hyper { background-color: var(--color-hyper); } .text-synth { color: var(--color-synth); } .bg-synth { background-color: var(--color-synth); } .text-volt { color: var(--color-volt); } .bg-volt { background-color: var(--color-volt); } .text-brand { color: var(--color-brand); } .bg-brand { background-color: var(--color-brand); } /* ----------------------------------------------- 4. BRUTAL SHADOW ----------------------------------------------- */ .shadow-brutal { box-shadow: 6px 6px 0px 0px var(--color-asphalt); } .shadow-brutal-brand { box-shadow: 6px 6px 0px 0px var(--color-brand); } .shadow-brutal-sm { box-shadow: 4px 4px 0px 0px var(--color-asphalt); } /* ----------------------------------------------- 5. BUTTON VARIANTS (5 Hover Effects) ----------------------------------------------- */ /* Shared Button Base */ .btn-cds { display: inline-block; font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 1rem 2rem; font-size: 1rem; cursor: pointer; text-decoration: none; text-align: center; border: 2px solid var(--color-asphalt); } /* 1. The Push — Solid Shadow Translate (Primary/Checkout) */ .btn-push { background-color: var(--color-brand); color: var(--color-asphalt); box-shadow: 6px 6px 0px 0px var(--color-asphalt); transition: all 0.15s ease; } .btn-push:hover { transform: translate(4px, 4px); box-shadow: 2px 2px 0px 0px var(--color-asphalt); } /* 2. Cyber Fill — Slide Background (Secondary) */ .btn-fill { background-color: var(--color-pure); color: var(--color-asphalt); position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; } .btn-fill::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color-brand); z-index: -1; transition: left 0.3s ease; } .btn-fill:hover { color: var(--color-asphalt); } .btn-fill:hover::before { left: 0; } /* 3. Neon Glow Pulse (High Attention) */ .btn-glow { background-color: var(--color-asphalt); color: var(--color-pure); transition: all 0.3s ease; } .btn-glow:hover { box-shadow: 0 0 20px 2px var(--color-brand); border-color: var(--color-brand); color: var(--color-brand); } /* 4. Punk Glitch — Skew (Disruptor) */ .btn-glitch { background-color: var(--color-brand); color: var(--color-asphalt); box-shadow: 4px 4px 0px 0px var(--color-asphalt); transition: all 0.1s ease; } .btn-glitch:hover { animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; background-color: var(--color-asphalt); color: var(--color-brand); } /* 5. Brutal Invert (Pop-out) */ .btn-invert { background-color: var(--color-pure); color: var(--color-asphalt); transition: all 0.2s ease; } .btn-invert:hover { background-color: var(--color-asphalt); color: var(--color-brand); box-shadow: -6px -6px 0px 0px var(--color-brand); transform: translate(2px, 2px); } /* ----------------------------------------------- 6. FORM ELEMENTS — Brutalist Style ----------------------------------------------- */ /* Text Inputs & Selects */ .input-street, .cds-input { background-color: var(--color-bg); border: 2px solid var(--color-asphalt); padding: 0.75rem; font-family: var(--font-body); font-size: 0.875rem; color: var(--color-asphalt); transition: all 0.2s ease; width: 100%; } .input-street:focus, .cds-input:focus { outline: none; background-color: var(--color-pure); border-color: var(--color-brand); box-shadow: 4px 4px 0px 0px var(--color-brand); } .input-street::placeholder, .cds-input::placeholder { color: rgba(17, 17, 17, 0.4); } /* Custom Checkbox */ input[type="checkbox"].custom-checkbox { appearance: none; -webkit-appearance: none; background-color: var(--color-pure); margin: 0; font: inherit; color: currentColor; width: 1.5em; height: 1.5em; border: 2px solid var(--color-asphalt); display: grid; place-content: center; cursor: pointer; transition: all 0.2s ease; } input[type="checkbox"].custom-checkbox::before { content: ""; width: 0.8em; height: 0.8em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--color-asphalt); background-color: var(--color-asphalt); transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } input[type="checkbox"].custom-checkbox:checked { background-color: var(--color-brand); } input[type="checkbox"].custom-checkbox:checked::before { transform: scale(1); } input[type="checkbox"].custom-checkbox:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* Custom Radio Button */ input[type="radio"].custom-radio { appearance: none; -webkit-appearance: none; background-color: var(--color-pure); margin: 0; font: inherit; color: currentColor; width: 1.5em; height: 1.5em; border: 2px solid var(--color-asphalt); border-radius: 50%; display: grid; place-content: center; cursor: pointer; transition: all 0.2s ease; } input[type="radio"].custom-radio::before { content: ""; width: 0.7em; height: 0.7em; border-radius: 50%; transform: scale(0); transition: 120ms transform ease-in-out; background-color: var(--color-asphalt); } input[type="radio"].custom-radio:checked { border-color: var(--color-asphalt); background-color: var(--color-brand); } input[type="radio"].custom-radio:checked::before { transform: scale(1); } input[type="radio"].custom-radio:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } /* Custom Toggle Switch */ .custom-toggle { appearance: none; -webkit-appearance: none; width: 3.5em; height: 1.75em; background-color: var(--color-pure); border: 2px solid var(--color-asphalt); border-radius: 2em; position: relative; cursor: pointer; transition: background-color 0.3s; } .custom-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.25em; height: 1.25em; background-color: var(--color-asphalt); border-radius: 50%; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .custom-toggle:checked { background-color: var(--color-brand); } .custom-toggle:checked::after { transform: translateX(1.75em); } /* ----------------------------------------------- 7. STICKY NOTE COMPONENT ----------------------------------------------- */ .ui-sticky-note { background: #FEFF9C; position: relative; padding: 2rem; border: 2px solid var(--color-asphalt); box-shadow: 4px 4px 0px 0px var(--color-asphalt); transform: rotate(-1deg); transition: transform 0.2s ease; } .ui-sticky-note:hover { transform: rotate(1deg) scale(1.02); } .ui-sticky-note::after { content: ""; position: absolute; bottom: -2px; right: -2px; border-width: 15px; border-style: solid; border-color: var(--color-asphalt) var(--color-asphalt) transparent transparent; display: block; width: 0; } /* ----------------------------------------------- 8. BACKGROUND PATTERNS ----------------------------------------------- */ /* Lined Notepad */ .bg-notepad { background-color: var(--color-bg); background-image: linear-gradient(90deg, transparent 60px, rgba(217, 4, 41, 0.4) 60px, rgba(217, 4, 41, 0.4) 62px, transparent 62px), linear-gradient(rgba(17, 17, 17, 0.1) 1px, transparent 1px); background-size: 100% 32px; background-attachment: local; } /* Street Checker */ .bg-checker { background-color: var(--color-bg); background-image: repeating-linear-gradient(45deg, #111111 25%, transparent 25%, transparent 75%, #111111 75%, #111111), repeating-linear-gradient(45deg, #111111 25%, var(--color-bg) 25%, var(--color-bg) 75%, #111111 75%, #111111); background-position: 0 0, 10px 10px; background-size: 20px 20px; } /* Caution Tape */ .bg-caution { background: repeating-linear-gradient( -45deg, var(--color-brand), var(--color-brand) 20px, var(--color-asphalt) 20px, var(--color-asphalt) 40px ); } /* Blueprint Grid */ .bg-blueprint { background-color: var(--color-bg); background-image: linear-gradient(var(--color-asphalt) 2px, transparent 2px), linear-gradient(90deg, var(--color-asphalt) 2px, transparent 2px); background-size: 40px 40px; } /* Heavy Polka Dots */ .bg-polka { background-color: var(--color-brand); background-image: radial-gradient(var(--color-asphalt) 6px, transparent 6px); background-size: 32px 32px; } /* ----------------------------------------------- 9. ANIMATIONS ----------------------------------------------- */ /* Marquee — Scrolling Text Strip */ .cds-marquee { white-space: nowrap; overflow: hidden; box-sizing: border-box; } .cds-marquee-inner { display: inline-block; animation: cds-marquee 20s linear infinite; } @keyframes cds-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Glitch Effect */ .glitch-wrapper { position: relative; display: inline-block; } .glitch-text { position: relative; color: var(--color-asphalt); font-family: var(--font-headline); font-weight: 800; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-pure); } .glitch-text::before { left: 3px; text-shadow: -2px 0 red; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); animation: glitch-anim-1 2.5s infinite linear alternate-reverse; } .glitch-text::after { left: -3px; text-shadow: -2px 0 var(--color-brand); clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: glitch-anim-2 3s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip-path: polygon(0 20%, 100% 20%, 100% 30%, 0 30%); transform: translate(0); } 20% { clip-path: polygon(0 60%, 100% 60%, 100% 80%, 0 80%); transform: translate(-2px, 2px); } 40% { clip-path: polygon(0 10%, 100% 10%, 100% 50%, 0 50%); transform: translate(2px, -2px); } 60% { clip-path: polygon(0 80%, 100% 80%, 100% 90%, 0 90%); transform: translate(-2px, -2px); } 80% { clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); transform: translate(2px, 2px); } 100% { clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%); transform: translate(0); } } @keyframes glitch-anim-2 { 0% { clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%); transform: translate(0); } 20% { clip-path: polygon(0 30%, 100% 30%, 100% 60%, 0 60%); transform: translate(2px, -2px); } 40% { clip-path: polygon(0 70%, 100% 70%, 100% 90%, 0 90%); transform: translate(-2px, 2px); } 60% { clip-path: polygon(0 20%, 100% 20%, 100% 50%, 0 50%); transform: translate(2px, 2px); } 80% { clip-path: polygon(0 50%, 100% 50%, 100% 80%, 0 80%); transform: translate(-2px, -2px); } 100% { clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%); transform: translate(0); } } /* Glitch Skew (for Punk Button) */ @keyframes glitch-skew { 0% { transform: skew(0deg); } 20% { transform: skew(-10deg); } 40% { transform: skew(10deg); } 60% { transform: skew(-5deg); } 80% { transform: skew(5deg); } 100% { transform: skew(0deg); } } /* Spinning Badge */ .spin-slow { animation: cds-spin 10s linear infinite; } @keyframes cds-spin { 100% { transform: rotate(360deg); } } /* ----------------------------------------------- 10. PRODUCT CARD OVERRIDES ----------------------------------------------- */ .card-wrapper .card { border: 2px solid var(--color-asphalt); border-radius: 0; transition: all 0.2s ease; background: var(--color-pure); } .card-wrapper .card:hover { box-shadow: 6px 6px 0px 0px var(--color-asphalt); transform: translate(-2px, -2px); } .card-wrapper .card .card__inner { border-radius: 0; } /* NEW DROP Badge */ .cds-badge-new { position: absolute; top: 12px; right: 12px; background-color: var(--color-brand); color: var(--color-asphalt); font-family: var(--font-headline); font-weight: 800; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 4px 10px; border: 2px solid var(--color-asphalt); box-shadow: 2px 2px 0px 0px var(--color-asphalt); z-index: 2; } /* Product price styling */ .card-wrapper .price { font-family: var(--font-body); font-weight: 700; color: var(--color-asphalt); } /* ----------------------------------------------- 11. HEADER / NAV OVERRIDES ----------------------------------------------- */ .header { background-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; font-family: var(--font-headline); } /* ----------------------------------------------- 12. CUSTOM SCROLLBAR ----------------------------------------------- */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--color-bg); border-left: 2px solid var(--color-asphalt); } ::-webkit-scrollbar-thumb { background: var(--color-brand); border: 2px solid var(--color-asphalt); transition: background 0.3s; } /* ----------------------------------------------- 13. DAWN THEME OVERRIDES — Cleanup ----------------------------------------------- */ /* Remove Dawn's default rounded corners */ .button, .shopify-challenge__container, .customer button, button.shopify-payment-button__button--unbranded { border-radius: 0 !important; } /* Override Dawn's default button with brutalist style */ .button--primary { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt); font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease; } .button--primary:hover { transform: translate(4px, 4px); box-shadow: 2px 2px 0px 0px var(--color-asphalt); } .button--secondary { background-color: var(--color-pure) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease; } .button--secondary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--color-brand); z-index: -1; transition: left 0.3s ease; } .button--secondary:hover { color: var(--color-asphalt) !important; } .button--secondary:hover::before { left: 0; } /* Dawn input fields */ .field__input, .select__select, .customer .field input, .customer select { background-color: var(--color-bg) !important; border: 2px solid var(--color-asphalt) !important; border-radius: 0 !important; font-family: var(--font-body) !important; color: var(--color-asphalt) !important; transition: all 0.2s ease; } .field__input:focus, .select__select:focus, .customer .field input:focus { outline: none; background-color: var(--color-pure) !important; border-color: var(--color-brand) !important; box-shadow: 4px 4px 0px 0px var(--color-brand); } /* ----------------------------------------------- 14. RESPONSIVE TWEAKS ----------------------------------------------- */ @media (max-width: 749px) { .shadow-brutal, .card-wrapper .card:hover { box-shadow: 4px 4px 0px 0px var(--color-asphalt); } .btn-push { box-shadow: 4px 4px 0px 0px var(--color-asphalt); } .btn-push:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px 0px var(--color-asphalt); } .ui-sticky-note { padding: 1.5rem; } } /* ----------------------------------------------- 15. NOTEPAD BACKGROUND — Force through Dawn sections ----------------------------------------------- */ .shopify-section, .shopify-section > *, .section-template--*, main#MainContent, .content-for-layout { background-color: transparent !important; background: transparent !important; } /* Dawn-specific: .gradient and .color-scheme override */ .gradient, .color-scheme-1.gradient, .color-scheme-2.gradient { background: transparent !important; background-color: transparent !important; } /* Body: Force notepad pattern OVER Dawn's gradient class */ body, body.gradient { background-color: var(--color-bg) !important; background-image: linear-gradient(90deg, transparent 60px, rgba(217,4,41,0.4) 60px, rgba(217,4,41,0.4) 62px, transparent 62px), linear-gradient(rgba(17,17,17,0.1) 1px, transparent 1px) !important; background-size: 100% 32px !important; background-attachment: local !important; } /* 16. HEADER — Transparent background for notepad pattern */ .header-wrapper, .header-wrapper.color-scheme-1, .header-wrapper.color-scheme-1.gradient, .section-header, #shopify-section-header, #shopify-section-header > *, .header { background-color: transparent !important; background: transparent !important; } /* Announcement bar — also transparent */ .announcement-bar-section, .utility-bar-section, #shopify-section-announcement-bar, #shopify-section-announcement-bar .color-scheme-1, #shopify-section-announcement-bar .gradient { background-color: transparent !important; background: transparent !important; } .shopify-section-group-footer-group, .shopify-section-group-footer-group footer, .shopify-section-group-footer-group .footer, #shopify-section-footer, footer { background: var(--color-acid) !important; background-color: var(--color-acid) !important; } .shopify-section-group-footer-group .footer__content-top, .shopify-section-group-footer-group .footer__content-bottom, .shopify-section-group-footer-group .footer__content-bottom-wrapper, .shopify-section-group-footer-group .footer-block, .shopify-section-group-footer-group .newsletter-form { background: transparent !important; background-color: transparent !important; } .shopify-section-group-footer-group, .shopify-section-group-footer-group * { color: var(--color-asphalt) !important; } .shopify-section-group-footer-group a { color: var(--color-asphalt) !important; text-decoration: none; } .shopify-section-group-footer-group { border-top: 10px solid var(--color-asphalt) !important; } /* Custom header icon size */ .header__icon svg, .header__heading-link svg, .menu-drawer__utility-links svg, .header__icon .svg-wrapper svg { width: 20px; height: 20px; } /* ----------------------------------------------- 15. COMPREHENSIVE BUTTON OVERRIDES — Brandbook V1 All buttons across the shop follow the CDS Brutalist Design System Primary Action = "Solid Push" (btn-push) Secondary Action = "Cyber Fill" (btn-fill) Tertiary Action = "Brutal Invert" (btn-invert) ----------------------------------------------- */ /* === GLOBAL: All Dawn .button elements get brutalist base === */ .button, .shopify-challenge__button, .customer button, button.shopify-payment-button__button--unbranded, .cart__checkout-button, .cart__update-button, .product-form__submit, .form__submit { border-radius: 0 !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border: 2px solid var(--color-asphalt) !important; position: relative; cursor: pointer; } /* === PRIMARY BUTTONS: Solid Push Effect (Checkout, Add to Cart, Submit) === */ .button--primary, .cart__checkout-button, .product-form__submit, .shopify-payment-button__button--unbranded, button.shopify-payment-button__button--unbranded, .customer button[type="submit"], form .button--primary { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .button--primary:hover, .cart__checkout-button:hover, .product-form__submit:hover, .shopify-payment-button__button--unbranded:hover, button.shopify-payment-button__button--unbranded:hover, .customer button[type="submit"]:hover, form .button--primary:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; } /* === SECONDARY BUTTONS: Cyber Fill Effect === */ .button--secondary { background-color: transparent !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: none !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; position: relative; overflow: hidden; z-index: 1; transition: color 0.3s ease !important; } .button--secondary::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 100% !important; height: 100% !important; background: var(--color-brand) !important; z-index: -1 !important; transition: left 0.3s ease !important; } .button--secondary:hover { color: var(--color-asphalt) !important; background-color: transparent !important; } .button--secondary:hover::before { left: 0 !important; } /* === TERTIARY BUTTONS: Brutal Invert Effect === */ .button--tertiary { background-color: transparent !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: none !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; } .button--tertiary:hover { background-color: var(--color-asphalt) !important; color: var(--color-brand) !important; box-shadow: -6px -6px 0px 0px var(--color-brand) !important; transform: translate(2px, 2px) !important; } /* === CART DRAWER: Checkout Button === */ .cart-drawer .cart__checkout-button, .drawer__footer .cart__checkout-button, cart-drawer .cart__checkout-button { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); width: 100%; } .cart-drawer .cart__checkout-button:hover, .drawer__footer .cart__checkout-button:hover, cart-drawer .cart__checkout-button:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } /* === CART PAGE: CTA area === */ .cart__ctas .button, .cart__ctas .cart__checkout-button, .cart__ctas .cart__update-button { border-radius: 0 !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } .cart__update-button { background-color: transparent !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: none !important; transition: all 0.15s ease !important; } .cart__update-button:hover { background-color: var(--color-asphalt) !important; color: var(--color-brand) !important; box-shadow: -6px -6px 0px 0px var(--color-brand) !important; transform: translate(2px, 2px) !important; } /* === DYNAMIC CHECKOUT BUTTONS (Shop Pay, Apple Pay etc.) === */ .shopify-payment-button .shopify-payment-button__button { border-radius: 0 !important; border: 2px solid var(--color-asphalt) !important; font-family: var(--font-headline) !important; min-height: 48px !important; } .shopify-payment-button .shopify-payment-button__button--unbranded { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .shopify-payment-button .shopify-payment-button__button--unbranded:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } .cart__dynamic-checkout-buttons .shopify-payment-button__button { border-radius: 0 !important; } /* === PRODUCT FORM: Add to Cart button specifically === */ product-form .product-form__submit, .product-form .product-form__submit, .product-form__submit.button--primary { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); } product-form .product-form__submit:hover, .product-form .product-form__submit:hover, .product-form__submit.button--primary:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } /* === NEWSLETTER FORM === */ .newsletter-form__button, .footer__newsletter .newsletter-form__button { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .newsletter-form__button:hover, .footer__newsletter .newsletter-form__button:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } /* === BUTTON LABEL (inside Dawn button spans) === */ .button span, .button--primary span, .button--secondary span, .button--tertiary span, .cart__checkout-button span, .product-form__submit span { font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; } /* === SOLD OUT / DISABLED state === */ .button[disabled], .button--primary[disabled], .product-form__submit[disabled], .button[aria-disabled="true"], .product-form__submit[aria-disabled="true"] { background-color: #999 !important; color: #666 !important; border: 2px solid #666 !important; box-shadow: 4px 4px 0px 0px #666 !important; cursor: not-allowed !important; opacity: 1 !important; } /* === QUANTITY SELECTOR buttons === */ .quantity__button { border-radius: 0 !important; border: 2px solid var(--color-asphalt) !important; background-color: transparent !important; color: var(--color-asphalt) !important; transition: all 0.15s ease !important; } .quantity__button:hover { background-color: var(--color-asphalt) !important; color: var(--color-brand) !important; } /* === REMOVE all Dawn border-radius from buttons globally === */ .button, .button::before, .button::after, .shopify-payment-button__button, .shopify-payment-button__button::before, .shopify-payment-button__button::after { border-radius: 0 !important; } /* === FIX: Remove Dawn's pseudo-element background overlays === */ .button--primary::before, .button--primary::after, .cart__checkout-button::before, .cart__checkout-button::after, .product-form__submit::before, .product-form__submit::after { background: transparent !important; box-shadow: none !important; } /* === RESPONSIVE: Smaller shadow on mobile === */ @media screen and (max-width: 749px) { .button--primary, .cart__checkout-button, .product-form__submit, .shopify-payment-button__button--unbranded, button.shopify-payment-button__button--unbranded, .newsletter-form__button { box-shadow: 4px 4px 0px 0px var(--color-asphalt) !important; } .button--primary:hover, .cart__checkout-button:hover, .product-form__submit:hover, .shopify-payment-button__button--unbranded:hover, .newsletter-form__button:hover { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0px 0px var(--color-asphalt) !important; } } /* ----------------------------------------------- 16. FIX: Generic .button elements (empty cart, contact form, 404, etc.) Dawn uses plain .button class (without --primary modifier) on several pages. These must also get the Solid Push treatment. ----------------------------------------------- */ /* Generic .button without modifier = treat as Primary (Solid Push) */ .button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.shopify-payment-button__button) { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.shopify-payment-button__button):hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; } /* Fix pseudo-elements for generic .button too */ .button:not(.button--secondary):not(.button--tertiary)::before, .button:not(.button--secondary):not(.button--tertiary)::after { background: transparent !important; box-shadow: none !important; } /* Contact form specific */ .contact__button .button, .contact__button button[type="submit"] { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; font-family: var(--font-headline) !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; border-radius: 0 !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .contact__button .button:hover, .contact__button button[type="submit"]:hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } /* Empty cart "Continue Shopping" link-button */ .cart--empty .button, .cart .button:not(.cart__checkout-button):not(.cart__update-button) { background-color: var(--color-brand) !important; color: var(--color-asphalt) !important; border: 2px solid var(--color-asphalt) !important; box-shadow: 6px 6px 0px 0px var(--color-asphalt) !important; transition: all 0.15s ease !important; transform: translate(0, 0); } .cart--empty .button:hover, .cart .button:not(.cart__checkout-button):not(.cart__update-button):hover { transform: translate(4px, 4px) !important; box-shadow: 2px 2px 0px 0px var(--color-asphalt) !important; } /* Responsive fix for generic .button on mobile */ @media screen and (max-width: 749px) { .button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.shopify-payment-button__button) { box-shadow: 4px 4px 0px 0px var(--color-asphalt) !important; } .button:not(.button--secondary):not(.button--tertiary):not(.quantity__button):not(.shopify-payment-button__button):hover { transform: translate(3px, 3px) !important; box-shadow: 1px 1px 0px 0px var(--color-asphalt) !important; } } .card__heading, .card-information { padding-left: 1.2rem; padding-right: 1.2rem; }