/* ============================================================ brutal.css — BRUTALIST-LOOK for Trykkeriet God Dag ------------------------------------------------------------ Dette er et OVERLEGG som legges oppå styles.css. Skru av: kjør ./brutal-av.sh (eller fjern -linja merket nederst i på hver side). Ingenting er slettet — kun overstyrt. Inspirasjon: yrstruly.uk + brutalistwebsites.com/raw ============================================================ */ :root{ --papir:#f2efe6; --papir2:#e8e3d4; --blekk:#000000; --rod:#e2311b; --blaa:#1a1aff; /* elektrisk blå (RAW) */ --strek:#000000; --graa:#5c5c5c; --hard:6px 6px 0 #000; } /* ---------- GRUNNLAG ---------- */ body{ background:var(--papir); color:#000; font-family:var(--mono); font-size:1rem; line-height:1.5; } ::selection{background:var(--blaa);color:#fff} *{border-radius:0 !important} /* ---------- TOPPEN: rød ticker + rå meny ---------- */ .site-head{ background:var(--papir); backdrop-filter:none; border-bottom:3px solid #000; padding:0; } .logo{display:block;padding:1.3rem 1rem .5rem} .logo-img{max-height:120px;max-width:340px;margin:0 auto} .logo:hover .logo-img{transform:rotate(-1.5deg) scale(1.02)} .site-nav{ margin:0;gap:0; border-top:3px solid #000; display:flex;flex-wrap:wrap;overflow:hidden; /* takler både 5 og 6 lenker */ } .site-nav a{ flex:1 1 130px;text-align:center; font-family:var(--mono);font-size:.68rem;font-weight:500; letter-spacing:.12em;text-transform:uppercase; padding:.75rem .4rem;border:0; box-shadow:3px 0 0 #000, 0 3px 0 #000; /* skillelinjer uten overflyt */ background:var(--papir);color:#000; transition:none; } .site-nav a::before,.site-nav a::after{display:none !important} .site-nav a:hover{background:#000;color:var(--papir)} .site-nav a[aria-current="page"]{background:var(--blaa);color:#fff;border-bottom:0} /* admin har bare én lenke — la den fylle raden */ .site-nav a:only-child{flex:1 1 100%} /* ---------- SIDEINNHOLD ---------- */ .page{max-width:1180px;padding:2.4rem 1.2rem 4rem} .eyebrow{ font-family:var(--mono);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:#000; border:3px solid #000;display:inline-block; padding:.3rem .7rem;margin-bottom:1.4rem;background:var(--papir2); } .eyebrow .pass{ width:auto;height:auto;border:0;background:none; color:var(--rod);font-size:.66rem;line-height:1; } .eyebrow .pass::before{content:"◼ "} /* enorme overskrifter à la YRS TRULY */ .sq-reveal,.page h1{ font-family:var(--serif); font-size:clamp(3rem,11vw,8rem) !important; font-weight:500;font-style:normal; line-height:.86;letter-spacing:-.03em; text-transform:uppercase; margin-bottom:1.6rem; max-width:none; } .sq-reveal.printed .sq-text,.sq-reveal .sq-text{text-shadow:none !important} .sq-reveal .blade{background:var(--blaa);width:18px} .lede{ font-family:var(--serif); font-size:clamp(1.3rem,2.8vw,2rem) !important; line-height:1.2;max-width:24em;font-style:normal; } .lede em{font-style:normal;text-decoration:underline;text-underline-offset:4px} /* ingen fargede sidestreker på tekstblokker */ .demonote,.calcnote,#cCmyk{border-left:0;padding-left:0} .demonote{background:var(--papir2);padding:1rem;border:3px solid #000} #cCmyk{border-left:4px solid var(--rod);padding-left:.8rem} .bodycol{font-family:var(--mono);font-size:.88rem;line-height:1.75;color:#000;max-width:42em} h2,h3{font-family:var(--serif) !important;text-transform:uppercase;letter-spacing:-.01em} /* ---------- FOOTER ---------- */ .site-foot{ border-top:3px solid #000;background:var(--blaa);color:#fff; margin-top:0;padding:2.4rem 1.2rem 3rem; } .site-foot h3{color:#fff;font-size:2rem} .site-foot p{color:#fff !important} .footmeta{color:#fff;font-size:.72rem} .footmeta a{color:#fff;text-decoration:underline;text-underline-offset:3px} .footmeta a:hover{background:#fff;color:var(--blaa)} .newsform{gap:0;max-width:30rem} .newsform input{ border:3px solid #000;background:#fff;font-family:var(--mono); font-size:.85rem;padding:.8rem; } .newsform button{ border:3px solid #000;border-left:0;background:#000;color:#fff; font-size:.7rem;letter-spacing:.14em;padding:0 1.2rem; } .newsform button:hover{background:var(--rod);color:#fff} /* ---------- KNAPPER / LENKER ---------- */ .mailcta,.authbtn,.btn,.pm-close,.tabs button,.oauth button,.sendbtn{ border:3px solid #000 !important; font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em; box-shadow:var(--hard); transition:transform .08s,box-shadow .08s; } .sendbtn{background:var(--blaa);color:#fff} .sendbtn:hover:not(:disabled){background:#000;color:var(--papir)} .sendbtn:hover:not(:disabled),.authbtn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #000} .sendbtn:disabled{background:var(--papir2) !important;color:#7a7a7a !important;box-shadow:none} .mailcta::before{display:none} .mailcta{background:var(--blaa);color:#fff !important;padding:1rem 1.6rem} .mailcta:hover,.authbtn:hover,.btn:hover,.oauth button:hover{ transform:translate(3px,3px);box-shadow:3px 3px 0 #000; } .authbtn{background:var(--blaa);color:#fff} .btn.solid{background:#000;color:var(--papir)} /* ---------- HEI ---------- */ .photos figure{border:3px solid #000;background:var(--papir2);padding:.5rem;box-shadow:var(--hard)} .photos figcaption{font-size:.62rem;color:#000;letter-spacing:.16em} .photos img{filter:grayscale(1) contrast(1.15)} .photos figure:hover img{filter:none} /* ---------- BUTIKK ---------- */ .pickup{color:#000;font-size:.68rem} .pickup strong{background:var(--blaa);color:#fff;padding:.1rem .35rem} .tee{border:3px solid #000;box-shadow:var(--hard);transition:transform .1s,box-shadow .1s} .tee:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #000;border-color:#000} .tee.featured{border-color:#000;background:var(--blaa)} .tee.featured h2,.tee.featured .price{color:#fff} .tee .art{border:3px solid #000} .tee .flag{background:var(--rod);color:#fff;border:3px solid #000;font-size:.55rem;top:.4rem;left:.4rem} .tee h2{font-family:var(--mono) !important;font-size:1.5rem;font-weight:500;letter-spacing:.14em} .tee .price{color:#000;font-size:.72rem} .sizes button{border:2px solid #000;font-weight:500;height:32px} .sizes button:hover{background:var(--blaa);color:#fff;border-color:#000} .sizes button[aria-pressed="true"]{background:#000;color:var(--papir)} .applepay,.vippspay{border:3px solid #000 !important;height:46px} .applepay:hover,.vippspay:hover{transform:translate(2px,2px)} .demonote{border-left:8px solid var(--blaa);color:#000;font-size:.66rem;background:var(--papir2);padding:1rem} .paysheet,.pm-frame{border:3px solid #000;box-shadow:12px 12px 0 #000} .pm-frame{background:var(--blaa)} .pm-mesh{border:3px solid #000} .pm-head h2{font-family:var(--mono) !important;font-size:1.6rem} .pm-imgs img{border:3px solid #000} .pm-info{border:3px dashed #000;background:var(--papir2)} /* logo-regn: brutalist-palett (overstyrer inline-farger) */ .logorain span{opacity:.55 !important} .logorain span:nth-child(4n+1){background:var(--blaa) !important} .logorain span:nth-child(4n+2){background:var(--rod) !important} .logorain span:nth-child(4n+3){background:#000 !important} .logorain span:nth-child(4n+4){background:#ffd400 !important} /* ---------- BESTILL + KALKULATOR ---------- */ .ordercols h2,.recs h2,.calc h2{font-size:1.9rem;font-style:normal} .ordercols h2{text-transform:none;letter-spacing:-.01em} .checklist li{border-bottom:2px solid #000;font-family:var(--mono);font-size:.82rem;color:#000} .checklist li::before{border:2px solid #000;background:none;border-radius:0 !important;width:10px;height:10px} .checklist li:hover::before{background:var(--blaa);box-shadow:none} .rec{border-top:3px solid #000} .rec:last-child{border-bottom:3px solid #000} .rec .n{color:var(--blaa);font-weight:500} .rec h3{font-size:1.3rem} .rec p{font-family:var(--mono);font-size:.82rem;color:#000} .calc{border:3px solid #000;box-shadow:var(--hard);background:var(--papir2)} .garment{border:3px solid #000;background:#fff} .garment[aria-pressed="true"]{background:var(--blaa);box-shadow:none;border-color:#000} .garment[aria-pressed="true"] .gn,.garment[aria-pressed="true"] .gp{color:#fff} .garment[aria-pressed="true"] svg{stroke:#fff} .calcrow input,.calcrow select{border:3px solid #000;font-family:var(--mono);font-size:.9rem} .calcout{border-top:3px solid #000} .calcout .big{font-family:var(--mono);font-size:2.4rem;font-style:normal;font-weight:500} .calcnote{color:#000;font-size:.62rem} /* ---------- OPPLASTING AV TRYKKFILER ---------- */ .summary{border:3px solid #000;box-shadow:var(--hard);background:var(--papir2);padding:1.2rem 1.3rem} .summary h2{font-family:var(--mono) !important;font-size:.68rem;color:#000;font-weight:500; text-transform:uppercase;border-bottom:3px solid #000;padding-bottom:.6rem;margin-bottom:.8rem} .srow{border-bottom:2px solid #000;padding:.5rem 0;font-family:var(--mono);font-size:.8rem} .srow:last-child{border-bottom:0;font-weight:500;background:var(--blaa);color:#fff; padding:.6rem .5rem;margin-top:.4rem} .srow span:first-child{color:#000;font-weight:500} .srow:last-child span:first-child{color:#fff} .summary .endre{color:#000;border:3px solid #000;padding:.45rem .8rem;text-decoration:none;font-weight:500} .summary .endre:hover{background:#000;color:var(--papir)} .files{gap:0} .fileslot{border:3px solid #000;border-bottom-width:0;background:#fff;padding:1rem 1.1rem} .fileslot:last-child{border-bottom-width:3px} .fileslot .num{color:var(--blaa);font-weight:500} .fileslot .fname{font-weight:500;text-transform:uppercase;letter-spacing:.1em} .fileslot input[type=file]{border:2px dashed #000;padding:.6rem;background:var(--papir2);cursor:pointer} .fileslot .valgt{color:#0a6b2f;font-weight:500} .fileslot .feil{color:#a51e0e;font-weight:500} .field textarea{border:3px solid #000;font-family:var(--mono);font-size:.88rem} .hint{color:#000;font-size:.66rem} .msg.info{border:3px solid #000;background:var(--blaa);color:#fff} .done{border:3px solid #000;box-shadow:var(--hard);background:#fff} .done .ok{border:3px solid #000;background:var(--blaa);width:60px;height:60px;line-height:54px} .done h2{font-size:2.2rem} .done p{color:#000;font-family:var(--mono);font-size:.82rem} .noorder{border:3px solid #000;background:var(--papir2)} .noorder p{font-family:var(--mono);font-size:.84rem} /* ---------- OSS ---------- */ .crewcard{border:3px solid #000;box-shadow:var(--hard);background:#fff;transition:transform .1s,box-shadow .1s} .crewcard:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 #000} .crewcard .pic{border:3px solid #000} .crewcard h2{font-family:var(--mono) !important;font-size:1rem;font-style:normal;letter-spacing:.06em} .crewcard a{color:var(--blaa);text-decoration:underline;font-size:.66rem} .crewcard a:hover{background:var(--blaa);color:#fff} .mentions{border:3px solid #000;padding:1rem;color:#000;font-size:.68rem;background:var(--papir2)} /* ---------- KUNDE / ADMIN ---------- */ .tabs{gap:0;margin-bottom:1.4rem} .tabs button{flex:1;background:var(--papir);color:#000;box-shadow:none !important;border-right:0 !important} .tabs button:last-child{border-right:3px solid #000 !important} .tabs button[aria-selected="true"]{background:var(--blaa);color:#fff;border-color:#000} .oauth button{box-shadow:var(--hard)} .divider{color:#000;font-weight:500} .divider::before,.divider::after{background:#000;height:3px} .field input{border:3px solid #000;font-family:var(--mono);font-size:.88rem} .field label{color:#000;font-weight:500} .fieldset{border:3px solid #000;background:var(--papir2)} .fieldset legend{background:var(--rod);color:#fff;padding:.2rem .6rem;font-weight:500} .msg.err{border:3px solid #000;background:var(--rod);color:#fff} .msg.ok{border:3px solid #000;background:var(--blaa);color:#fff} .welcome{border:3px solid #000;box-shadow:var(--hard)} .stat{border:3px solid #000;background:var(--papir2)} .stat b{font-family:var(--mono);font-style:normal} .tablewrap{border:3px solid #000} th{background:#000;color:var(--papir);font-weight:500} td{border-bottom:2px solid #000} h2.sec{font-size:1.8rem;font-style:normal} /* ---------- FORSIDE: karusell + ticker ---------- */ .tagline{ font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;color:#000; border-bottom:3px solid #000;padding:.7rem 1rem;background:var(--papir2); } /* ticker alltid synlig, festet nederst på skjermen */ .ticker{ position:fixed;left:0;right:0;bottom:0;z-index:90; border-top:3px solid #000;border-bottom:0;background:#000; } .ticker .tk{color:#fff;font-weight:500} .ticker .tk .rd{color:var(--blaa)} body{padding-bottom:2.6rem} /* plass så tickeren ikke dekker innhold */ /* karusellen beholdes HELT som før — originale akvarellfarger, korall duk og pastell-aura. Kun blekket er rent svart. */ .press{--ink:#000} .fsk .ink{stroke-width:2.6} /* ---------- PORTEFØLJE: YRS TRULY-behandling ---------- */ .gallery{columns:auto;column-gap:0;display:grid;grid-template-columns:repeat(12,1fr);gap:0; margin-top:2rem;border-top:3px solid #000} .gallery figure{ margin:0;border:0;border-bottom:3px solid #000;border-right:3px solid #000; background:var(--papir);position:relative;overflow:hidden; grid-column:span 4;aspect-ratio:4/5; display:flex;align-items:center;justify-content:center; counter-increment:tgd; } /* uregelmessig rytme — noen bilder bryter ut */ .gallery figure:nth-child(6n+1){grid-column:span 8;aspect-ratio:16/10} .gallery figure:nth-child(6n+4){grid-column:span 6;aspect-ratio:3/2} .gallery figure:nth-child(6n+5){grid-column:span 6;aspect-ratio:3/2} .gallery img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.2)} .gallery figure:hover img{filter:none;transform:scale(1.02)} /* nummerering som i et arkiv */ .gallery figure::before{ content:"(" counter(tgd,decimal-leading-zero) ")"; position:absolute;top:0;left:0;z-index:2; font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;font-weight:500; background:#000;color:var(--papir);padding:.3rem .55rem; } .gallery figure::after{ content:"SE STORT ↗";background:var(--blaa);color:#fff; border:0;left:auto;right:0;bottom:0;padding:.3rem .55rem;font-size:.6rem; } .lbox{background:var(--papir)} .lbox img{border:3px solid #000;box-shadow:12px 12px 0 #000} .lbox button{border:3px solid #000;color:#000;background:var(--papir)} .lbox button:hover{background:#000;color:var(--papir)} .lb-count{color:#000;font-weight:500} @media (max-width:860px){ .gallery{grid-template-columns:repeat(6,1fr)} .gallery figure, .gallery figure:nth-child(6n+1), .gallery figure:nth-child(6n+4), .gallery figure:nth-child(6n+5){grid-column:span 3;aspect-ratio:1} } @media (max-width:520px){ .gallery{grid-template-columns:repeat(2,1fr)} .gallery figure, .gallery figure:nth-child(6n+1), .gallery figure:nth-child(6n+4), .gallery figure:nth-child(6n+5){grid-column:span 1;aspect-ratio:1} .site-nav a{font-size:.62rem;letter-spacing:.08em} }