/* ============================================================
Nordic Wristbands — typography modernisation layer
Drop-in override. Load AFTER css/styles.css:
Nothing here changes markup. Remove the file to revert.
============================================================ */
/* ---- 1. FONT -----------------------------------------------
One variable family with real weights, replacing the three
faux families ('Roboto', 'Roboto Medium', 'Roboto Black').
Self-hosted — no request ever leaves the server, so there is
no Google Fonts / GDPR exposure. Files live in
/fonts/archivo/ alongside the SIL Open Font Licence the
typeface ships under (LICENSE.txt, must stay there).
One variable file covers weights 100–900, so 400/500/600/700
/800 all come from a single 35 KB download rather than five
separate static files.
------------------------------------------------------------ */
@font-face{
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900; /* variable weight axis */
font-display: swap;
src: url('/fonts/archivo/archivo-latin-wght-normal.woff2') format('woff2-variations'),
url('/fonts/archivo/archivo-latin-wght-normal.woff2') format('woff2');
/* Latin: covers English, Finnish (ä ö å) and German (ü ß) */
unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,
U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/archivo/archivo-latin-ext-wght-normal.woff2') format('woff2-variations'),
url('/fonts/archivo/archivo-latin-ext-wght-normal.woff2') format('woff2');
/* Latin Extended — only downloaded if a page actually uses it */
unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
:root{
--nw-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Ink instead of #333 — darker reads as more deliberate */
--nw-ink: #0B1416;
--nw-muted: #5C6660;
--nw-line: rgba(11,20,22,.12);
/* Existing brand green, plus a deeper tone for text on white
(#54c048 fails contrast at body size) */
--nw-green: #54c048;
--nw-green-text: #3F8F2E;
}
/* ---- 2. BASE ------------------------------------------------
The live site sets body { font: 400 14px/14px 'Roboto' }.
A 14px line-height on 14px text is the single biggest reason
everything feels cramped.
------------------------------------------------------------ */
body{
font-family: var(--nw-sans) !important;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: var(--nw-ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,
.header, .main-image .text .head{
font-family: var(--nw-sans) !important;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.015em;
text-wrap: balance; /* stops orphan words on headlines */
/* NO color here on purpose: the site puts white headings over
photos (.header is white by default). Setting a colour here
turns the hero and every product tile title dark. */
}
p{ line-height: 1.65; }
p + p{ margin-top: 1em; }
/* Measure: no line of body copy longer than ~70 characters */
.home-introduction p,
.news-detail-page p,
.content p{ max-width: 68ch; }
/* ---- 3. HERO ------------------------------------------------
Currently 72px/59px ALL CAPS Roboto Black, full bleed.
Caps + 0.82 leading is what dates the page hardest.
------------------------------------------------------------ */
.main-image .text .head{
font: 800 clamp(30px, 4.2vw, 52px)/1.08 var(--nw-sans) !important;
letter-spacing: -0.025em;
text-transform: none; /* sentence case */
/* 22ch, not the ~17ch that suits English alone: the hero box
is a fixed height and Finnish and German run much longer.
At 17ch the Finnish headline hit five lines and jammed up
against the navbar. 22ch keeps all three languages at
three lines or fewer. */
max-width: 22ch;
margin: 0 auto;
}
/* Sub-headline should be clearly secondary, not a second H1.
On the live page this is .main-image .text .accent — currently
rendered at nearly the same size as the H1, in caps. */
.main-image .text .accent,
.main-image .text .head.small,
.main-image .text p{
font: 400 clamp(16px, 1.7vw, 19px)/1.55 var(--nw-sans) !important;
letter-spacing: 0;
text-transform: none;
max-width: 46ch;
margin: 18px auto 0;
opacity: .88;
}
/* City strip → small caps label, not a headline */
.main-image .text ul.cities,
.main-image .text ul.cities li,
.main-image .text .locations{
font-size: 12.5px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .78;
}
/* Optional but recommended: a scrim behind the hero text.
Smaller, lighter type needs help against a busy photo. */
.main-image{ position: relative; }
.main-image > *{ position: relative; z-index: 1; }
.main-image::after{
content: "";
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg,
rgba(11,20,22,.55) 0%,
rgba(11,20,22,.30) 55%,
rgba(11,20,22,.60) 100%);
pointer-events: none;
}
/* ---- 4. SECTION HEADINGS ------------------------------------ */
.header{
font: 800 clamp(24px, 3.2vw, 36px)/1.12 var(--nw-sans) !important;
letter-spacing: -0.015em;
text-transform: none;
}
.header.small{
font-size: clamp(18px, 2vw, 22px) !important;
letter-spacing: -0.01em;
}
.home-introduction h2{
font-size: clamp(24px, 3.2vw, 36px);
line-height: 1.12;
letter-spacing: -0.015em;
margin-bottom: 20px;
}
h3{
font-size: 20px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
/* colour left alone — same reason as above */
}
/* Eyebrow / kicker pattern — the one place caps still work.
Add class="nw-eyebrow" above a heading. */
.nw-eyebrow{
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--nw-green-text);
margin-bottom: 12px;
}
/* ---- 5. PRODUCT TILES --------------------------------------
Caps titles laid over busy photos are the second-biggest
legibility problem. Cap the size, add a scrim, keep caps off.
------------------------------------------------------------ */
/* NOTE: tile titles reuse the same .header class as section
headings, so they must be scoped down separately. */
.square-content .header,
.product-items-list .header,
.products .header{
font-size: clamp(17px, 1.6vw, 21px) !important;
line-height: 1.25 !important;
font-weight: 700;
letter-spacing: -0.005em;
text-transform: none !important;
text-shadow: 0 1px 14px rgba(0,0,0,.6);
padding: 0 14px;
}
/* Same trick as the hero: a light scrim so white text holds up
over colourful product photography. */
.square-content{ position: relative; }
.square-content > *{ position: relative; z-index: 1; }
.square-content::after{
content: "";
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(180deg, rgba(11,20,22,.15), rgba(11,20,22,.50));
pointer-events: none;
}
/* …but keep the section heading above the grid full size */
.popular-products > .header,
.products > .header{
font-size: clamp(24px, 3.2vw, 36px) !important;
line-height: 1.12 !important;
text-shadow: none;
padding: 0;
margin-bottom: 28px;
}
/* ---- 6. NAV, BUTTONS, FORMS ---------------------------------
Nav is 18px uppercase #9d9d9d — low contrast and shouty.
------------------------------------------------------------ */
nav a, .navbar a, .main-menu a{
font-size: 14px !important;
font-weight: 500;
letter-spacing: .01em;
text-transform: none !important;
color: rgba(255,255,255,.82);
}
nav a:hover, .navbar a:hover, .main-menu a:hover{ color: #fff; }
.main-button, .small-button, button, .btn{
font-family: var(--nw-sans) !important;
font-size: 15px;
font-weight: 600;
letter-spacing: .01em;
text-transform: none;
border-radius: 999px;
padding: 12px 24px;
height: auto;
line-height: 1.2;
transition: background-color .15s ease, transform .15s ease;
}
.main-button:hover, .small-button:hover{ transform: translateY(-1px); }
.small-button{ font-size: 14px; padding: 10px 18px; }
/* Light inputs. The :not(.dark) matters — the site has its own
dark search-box variant (.input-text.dark, black background)
and it must keep its own colours. */
.input-text:not(.dark),
input[type=text]:not(.dark),
input[type=email]:not(.dark),
select, textarea{
font-family: var(--nw-sans) !important;
font-size: 15px;
text-transform: none;
color: var(--nw-ink);
background-color: #fff;
border-radius: 8px;
border: 1.5px solid var(--nw-line);
height: auto;
padding: 11px 14px;
}
/* Dark search box: shape and type only, colours left alone */
.input-text.dark{
font-family: var(--nw-sans) !important;
font-size: 15px;
text-transform: none;
border-radius: 8px;
height: auto;
padding: 11px 14px;
}
.input-text:not(.dark)::placeholder,
input:not(.dark)::placeholder{
color: var(--nw-muted);
text-transform: none;
letter-spacing: 0;
}
.input-text.dark::placeholder{
text-transform: none;
letter-spacing: 0;
}
/* Field labels — small caps is right here */
label, .field-label{
font-size: 12.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--nw-muted);
}
/* ---- 7. LINKS ----------------------------------------------- */
.home-introduction a,
.content a{
color: var(--nw-green-text);
text-decoration: none;
border-bottom: 1px solid rgba(63,143,46,.35);
padding-bottom: 1px;
}
.home-introduction a:hover,
.content a:hover{ border-bottom-color: currentColor; }
/* Product category chips under the intro paragraph */
.home-introduction .category-links a{
display: inline-block;
border: 1px solid var(--nw-line);
border-radius: 999px;
padding: 8px 16px;
margin: 4px;
font-size: 14px;
font-weight: 500;
color: var(--nw-ink);
}
.home-introduction .category-links a:hover{ border-color: var(--nw-ink); }
/* ---- 8. MOBILE ---------------------------------------------- */
@media (max-width: 720px){
body{ font-size: 15.5px; }
.main-image .text .head{ max-width: 100%; letter-spacing: -0.02em; }
}
/* ---- 9. RETIRE ROBOTO ---------------------------------------
The navbar, cart and a handful of containers still name
'Roboto' / 'Roboto Medium' / 'Roboto Black' explicitly, which
drags three legacy .woff files (~100 KB) onto every page for
text that should be Archivo. This sweeps them up.
Glyphicons is the site's only real icon font, so it is the
one thing excluded — never remove that :not(), or the
glyphicon characters turn into stray letters.
------------------------------------------------------------ */
body *:not([class*="glyphicon"]){
font-family: var(--nw-sans) !important;
}
/* ---- 10. MOBILE VIEWPORT ------------------------------------
styles.css sets html, body { min-width: 440px }. The navbar
toggle sits at x=381-425, so on any phone narrower than ~430px
(iPhone 14 is 390, most Androids 360-412) the menu button is
off-screen and the page scrolls sideways. Removing the floor
fixes both: no horizontal overflow, toggle back at x=313.
------------------------------------------------------------ */
html, body{ min-width: 0 !important; }
@media (max-width: 560px){
.container, .container-fluid{ padding-left: 16px !important; padding-right: 16px !important; }
}
/* ---- 11. READING MEASURE ------------------------------------
Centred three-line paragraphs are hard work. Heading stays
centred; the body copy does not.
------------------------------------------------------------ */
.home-introduction p{
text-align: left;
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
/* ---- 12. FOOTER ---------------------------------------------
Three problems: a fixed 260px height that the Finnish copy
overflows, an empty first column leaving 293px of dead space,
and newsletter links at line-height 18px running together.
NOTE: styles.css has footer, .main-wrapper::after {height:260px}
— a sticky-footer pair. Releasing the footer means retiring the
::after spacer too, or the page gains 260px of blank space.
Do not set footer .row { display:flex } — it collapses the
Bootstrap column widths to ~90px.
------------------------------------------------------------ */
footer{
height: auto !important;
min-height: 260px;
padding-top: 36px;
padding-bottom: 30px;
overflow: hidden; /* contains the floated columns */
}
.main-wrapper::after{ display: none !important; }
footer .row > div:empty{ display: none !important; }
footer .links-list{
clear: both;
width: 100%;
margin-top: 26px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.14);
}
footer .links-list a{ margin-right: 24px; }
.footer-header{
font-size: 13px !important;
line-height: 1.45 !important;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: 14px !important;
}
.footer-content{ line-height: 1.6 !important; }
.footer-content a{
display: block !important;
margin-bottom: 10px !important;
line-height: 1.35 !important; /* tighter inside an item than between items */
}
.footer-content a:last-child{ margin-bottom: 0 !important; }
/* ---- 13. NAVIGATION -----------------------------------------
Small caps with real tracking, not the old 18px grey caps.
Same eyebrow pattern used elsewhere in this file; at 12.5px
with 600 weight it reads as deliberate rather than shouted.
------------------------------------------------------------ */
.navbar-nav > li > a{
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .11em !important;
text-transform: uppercase !important;
}
.nwb-navbar{ border-bottom: 1px solid rgba(255,255,255,.10); }
/* ---- 14. SECTION HEADING SPACING ----------------------------
"Popular products" sat directly on top of the grid: the site
zeroes the heading's margin, and the earlier rule here was
being overridden, so the measured gap was 0px with only 20px
above. Needs !important to stick.
------------------------------------------------------------ */
/* the heading sits inside .container, not directly in the section,
so the child selector has to go two levels deep — and it must stay
specific, or it would also hit the tile titles inside .square-content */
.popular-products > .container > .header,
.products > .container > .header{
margin-bottom: 40px !important;
margin-top: 14px !important;
}
/* ---- 15. HEADER CTA -----------------------------------------
Adds the anchor the navbar was missing. The
itself comes
from protected/components/widgets/views/topMenu.php; labels
come from the NwbCta helper, which carries its own nine
translations because the site's Yii::t("site", …) catalogue is
empty (that is why "About us" is English everywhere).
Six nav items become seven, so each takes 1/7 of the bar.
------------------------------------------------------------ */
/* The site gave each nav item an equal 1/6 of the bar. Adding a seventh
item and keeping equal widths broke it: at 1/7 the cells are 133px, but
"REQUEST A QUOTE" needs 176px, so Safari pushed the language selector
onto a second row and .text-overflow truncated "PRODUCT…", "ABOUT US…".
Equal widths cannot work once one item is a button, so the bar is a flex
row and every item takes the width its own label needs. */
@media (min-width: 768px){
.navbar-nav{
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
float: none !important;
}
.navbar-nav > li{ width: auto !important; float: none !important; }
.navbar-nav > li > a{ padding-left: 10px !important; padding-right: 10px !important; }
/* labels now size to content, so the ellipsis must not fire */
.navbar-nav > li > a.text-overflow{ overflow: visible !important; text-overflow: clip !important; }
.nwb-cta-item{
display: flex !important;
align-items: center;
height: 65px;
}
}
/* Between the collapse breakpoint and 1200px the bar is narrow enough that
the long labels (es "Solicitar presupuesto", de "Angebot anfordern")
still overflow, so tighten padding and tracking in that band only. */
@media (min-width: 768px) and (max-width: 1199px){
.navbar-nav > li > a{
padding-left: 4px !important;
padding-right: 4px !important;
font-size: 11.5px !important;
letter-spacing: .04em !important;
}
.nwb-cta{
padding: 8px 12px !important;
font-size: 11.5px !important;
letter-spacing: .03em !important;
}
}
/* Below 1024px Norwegian and Danish still overflow — "Populære produkter"
and "Instagrambilder" are long — so tighten once more in that band. */
@media (min-width: 768px) and (max-width: 1023px){
.navbar-nav > li > a{
padding-left: 2px !important;
padding-right: 2px !important;
font-size: 10.5px !important;
letter-spacing: .015em !important;
}
.nwb-cta{
padding: 7px 10px !important;
font-size: 10.5px !important;
letter-spacing: .02em !important;
}
}
.nwb-cta{
display: inline-flex;
align-items: center;
background: var(--nw-green);
color: #fff !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
padding: 9px 18px !important;
border-radius: 999px;
text-decoration: none !important;
white-space: nowrap;
transition: background .15s ease, transform .15s ease;
}
.nwb-cta:hover,
.nwb-cta:focus{
background: var(--nw-green-text);
color: #fff !important;
transform: translateY(-1px);
}
/* collapsed menu: plain full-width item, no fixed height */
@media (max-width: 767px){
.nwb-cta-item{ padding: 10px 0 14px; text-align: center; }
}
/* ---- 16. STICKY-FOOTER LEFTOVER -----------------------------
The 260px sticky-footer hack had three parts: the fixed footer
height, the .main-wrapper::after spacer, and a matching
margin-bottom:-260px on .main-wrapper. Section 12 released the
first two; this releases the third. Without it the footer is
pulled up over the end of the page — measured 20px of
.popular-products sitting behind the footer on the homepage.
------------------------------------------------------------ */
.main-wrapper{ margin-bottom: 0 !important; }