/* ========================================================================== style-bold.css — stil-pakke "bold" (barbershop / trendy salon) Scoped under [data-style="bold"] (sat på af js/site.js ud fra SALON.style). Rører KUN udseende via de eksisterende CSS-variabler og klasser fra style.css — ingen markup-ændringer, ingen påvirkning af booking-widgeten (booking.css) eller andre stil-pakker. Udtryk: tung, versal sans-typografi, fyldte farveflader, hård kontrast, chunky knapper med "brutalist" offset-skygge, skarpe(re) hjørner. Respekterer lys/mørkt tema 100% via --c-*-variablerne. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&display=swap"); /* ---------- 0. Tokens — tungere skrift, skarpere hjørner ---------- */ [data-style="bold"] { --font-display: "Archivo", "Arial Black", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; --bold-shadow-c: var(--c-accent); } /* ---------- 1. Typografi — store, versale, tunge overskrifter ---------- */ [data-style="bold"] h1, [data-style="bold"] h2, [data-style="bold"] h3, [data-style="bold"] h4 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; } [data-style="bold"] body { font-weight: 500; } [data-style="bold"] .section-head p, [data-style="bold"] .about-text p, [data-style="bold"] .tagline { font-weight: 500; } /* ---------- 2. Knapper — chunky, versale, hård offset-skygge ---------- */ [data-style="bold"] .btn { border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.92rem; border-width: 3px; border-style: solid; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } [data-style="bold"] .btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-accent); box-shadow: 4px 4px 0 0 var(--bold-shadow-c); } [data-style="bold"] .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--bold-shadow-c); filter: none; background: var(--c-primary); } [data-style="bold"] .btn-primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 0 var(--bold-shadow-c); } [data-style="bold"] .btn-outline { border-color: var(--c-text); border-width: 3px; box-shadow: 4px 4px 0 0 color-mix(in srgb, var(--c-text) 25%, transparent); } [data-style="bold"] .btn-outline:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 color-mix(in srgb, var(--c-text) 25%, transparent); } [data-style="bold"] .btn-on-dark { border-width: 3px; border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08); color: var(--c-on-accent); box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.35); } [data-style="bold"] .btn-on-dark:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.35); background: rgba(255, 255, 255, 0.16); } [data-style="bold"] .btn:active { transform: translate(1px, 1px); } /* ---------- 3. Topbar / navigation ---------- */ [data-style="bold"] .topbar { border-bottom: 3px solid var(--c-primary); } [data-style="bold"] .brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } [data-style="bold"] .brand-mark { background: var(--c-primary); color: var(--c-on-primary); padding: 6px; border-radius: var(--radius-sm); width: 34px; height: 34px; } [data-style="bold"] .brand-text-city { font-weight: 700; } [data-style="bold"] .site-nav a { font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.03em; } [data-style="bold"] .site-nav a[aria-current="true"] { color: var(--c-primary); } @media (min-width: 900px) { [data-style="bold"] .site-nav a { border-bottom-width: 3px; } } [data-style="bold"] .theme-toggle, [data-style="bold"] .nav-toggle { border-width: 2px; border-color: var(--c-primary); border-radius: var(--radius-sm); } /* ---------- 4. Hero — fuldflade farve, kæmpe overskrift ---------- */ [data-style="bold"] .hero { border-bottom: 8px solid var(--c-primary); } [data-style="bold"] .hero[data-style="warm"], [data-style="bold"] .hero[data-style="cool"] { background: repeating-linear-gradient( 115deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 2px, transparent 2px, transparent 34px ), linear-gradient(160deg, var(--c-accent) 0%, color-mix(in srgb, var(--c-accent) 55%, #000) 100%); } [data-style="bold"] .hero-eyebrow { background: var(--c-primary); color: var(--c-on-primary); padding: 0.5em 1em; border-radius: var(--radius-sm); font-weight: 800; } [data-style="bold"] .hero h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); text-shadow: 0.045em 0.045em 0 var(--c-primary); } [data-style="bold"] .hero .tagline { font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.4rem); } [data-style="bold"] .hero-status { border-radius: var(--radius-sm); border-width: 2px; font-weight: 700; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; } [data-style="bold"] .hero-meta strong { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; } /* ---------- 5. Sektioner — skiftevis fyldte farveflader ---------- */ [data-style="bold"] .eyebrow { background: var(--c-primary); color: var(--c-on-primary); padding: 0.4em 0.9em; border-radius: var(--radius-sm); letter-spacing: 0.06em; } [data-style="bold"] .eyebrow::before { content: none; } [data-style="bold"] .section--alt { background: var(--c-accent); color: var(--c-on-accent); } [data-style="bold"] .section--alt .section-head p, [data-style="bold"] .section--alt .about-text p { color: color-mix(in srgb, var(--c-on-accent) 72%, transparent); } [data-style="bold"] .section--alt h2, [data-style="bold"] .section--alt h3 { color: var(--c-on-accent); } [data-style="bold"] .section--alt .eyebrow { background: var(--c-on-accent); color: var(--c-accent); } /* ---------- 6. Ydelseskort ---------- */ [data-style="bold"] .service-card { border-radius: var(--radius-md); border-width: 3px; border-color: var(--c-border); box-shadow: none; } [data-style="bold"] .service-card:hover { border-color: var(--c-primary); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 0 var(--c-primary); } [data-style="bold"] .service-group h3 { text-transform: uppercase; border-bottom-width: 3px; border-color: var(--c-primary); } [data-style="bold"] .service-price { font-weight: 900; } /* ---------- 7. Om os / figur ---------- */ [data-style="bold"] .about-figure { border-radius: var(--radius-md); border-width: 3px; border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 14%, var(--c-surface-alt)); } [data-style="bold"] .about-established { border-radius: var(--radius-sm); border-width: 2px; font-weight: 700; text-transform: uppercase; font-size: 0.78rem; } /* ---------- 8. Galleri ---------- */ [data-style="bold"] .gallery-item { border-radius: var(--radius-sm); border-width: 3px; border-color: var(--c-border); } [data-style="bold"] .gallery-item:hover { border-color: var(--c-primary); } [data-style="bold"] .gallery-caption { text-transform: uppercase; font-weight: 800; letter-spacing: 0.02em; } /* ---------- 9. Team ---------- */ [data-style="bold"] .team-card { border-radius: var(--radius-md); border-width: 3px; } [data-style="bold"] .avatar { border-radius: var(--radius-sm); font-weight: 900; } [data-style="bold"] .team-role { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.04em; font-weight: 800; } [data-style="bold"] .tag { border-radius: var(--radius-sm); font-weight: 800; text-transform: uppercase; border-width: 2px; } /* ---------- 10. Anmeldelser ---------- */ [data-style="bold"] .review-card { border-radius: var(--radius-md); border-width: 3px; } [data-style="bold"] .review-meta strong { text-transform: uppercase; font-weight: 800; } /* ---------- 11. Åbningstider ---------- */ [data-style="bold"] .hours-table { border-radius: var(--radius-md); border-width: 3px; } [data-style="bold"] .hours-table .day-name { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; } [data-style="bold"] .hours-table tr[data-today="true"] { background: var(--c-primary); } [data-style="bold"] .hours-table tr[data-today="true"] td { color: var(--c-on-primary); } [data-style="bold"] .hours-table tr[data-today="true"] .day-name { color: var(--c-on-primary); } [data-style="bold"] .today-badge { border-radius: var(--radius-sm); background: var(--c-on-primary); color: var(--c-primary); font-weight: 800; } /* ---------- 12. Kontakt ---------- */ [data-style="bold"] .contact-card { border-radius: var(--radius-md); border-width: 3px; } [data-style="bold"] .contact-card h3 { text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; } [data-style="bold"] .contact-icon { border-radius: var(--radius-sm); background: var(--c-primary); color: var(--c-on-primary); } [data-style="bold"] .contact-card a.contact-link { font-weight: 800; } [data-style="bold"] .social-links a { border-radius: var(--radius-sm); border-width: 2px; } [data-style="bold"] .map-link { font-weight: 800; text-transform: uppercase; font-size: 0.85rem; } /* ---------- 13. CTA-bånd ---------- */ [data-style="bold"] .cta-band { background: var(--c-primary); border-radius: var(--radius-md); border: 4px solid var(--c-accent); } [data-style="bold"] .cta-band h2 { color: var(--c-on-primary); } [data-style="bold"] .cta-band p { color: color-mix(in srgb, var(--c-on-primary) 78%, transparent); } [data-style="bold"] .cta-band .btn-primary { background: var(--c-accent); color: var(--c-on-accent); border-color: var(--c-on-primary); box-shadow: 4px 4px 0 0 var(--c-on-primary); } [data-style="bold"] .cta-band .btn-primary:hover { box-shadow: 6px 6px 0 0 var(--c-on-primary); } /* ---------- 14. Footer ---------- */ [data-style="bold"] .site-footer { border-top: 4px solid var(--c-primary); } [data-style="bold"] .footer-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; } [data-style="bold"] .footer-credit:hover { color: var(--c-primary); } /* ---------- 15. Mobil ---------- */ @media (max-width: 599px) { [data-style="bold"] .hero h1 { letter-spacing: -0.01em; } [data-style="bold"] .btn-primary, [data-style="bold"] .btn-outline, [data-style="bold"] .btn-on-dark { box-shadow: 3px 3px 0 0 var(--bold-shadow-c); } [data-style="bold"] .btn-on-dark { box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.35); } }