/*
* Tegn og Trall — the site's own styles, loaded after Divi's (functions.php).
*/
:root {
/*
* The line of the site's hand-drawn picture frame: thin, a little crooked,
* the four strokes crossing at the corners, as on the pictures on the home
* page (Mel, 21 Oct: the earlier frame's line was too straight). Stretched
* to any picture, the line keeps its width (non-scaling stroke).
*/
/* The newsletter strip's wavy edges: one gentle wave every 560 px, repeated across. */
--tt-wave-top: url("data:image/svg+xml;utf8,");
--tt-wave-bottom: url("data:image/svg+xml;utf8,");
--tt-frame-line: url("data:image/svg+xml;utf8,");
}
/* Hidden but read by screen readers. */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
white-space: nowrap;
}
/*
* Knitted lettering (inc/lettering.php): headings in a Text module with the
* class tt-lettering, drawn like the site's "SIGN UP" and "CONTACT ME" pictures:
* chunky capitals, a thin dark outline, each letter its own knitted colour.
*/
.tt-lettering h1,
.tt-lettering h2,
.tt-lettering h3 {
padding-bottom: 0;
font-family: "Atma", cursive;
font-size: 46px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.tt-l {
display: inline-block;
color: transparent;
-webkit-text-stroke: 1.5px #2b2b2b;
background:
linear-gradient(135deg, rgba(0, 0, 0, 0.22) 25%, transparent 25%) 0 0 / 7px 7px,
linear-gradient(225deg, rgba(0, 0, 0, 0.22) 25%, transparent 25%) 0 0 / 7px 7px,
var(--tt-knit, #3c4ba0);
-webkit-background-clip: text;
background-clip: text;
transform: rotate(var(--tt-tilt, 0deg));
}
.tt-l0 { --tt-knit: #c9c32c; --tt-tilt: -3deg; }
.tt-l1 { --tt-knit: #d3263a; --tt-tilt: 2deg; }
.tt-l2 { --tt-knit: #ef7c22; --tt-tilt: -1deg; }
.tt-l3 { --tt-knit: #3c4ba0; --tt-tilt: 3deg; }
.tt-l4 { --tt-knit: #2f6b33; --tt-tilt: -2deg; }
@media (max-width: 767px) {
.tt-lettering h1,
.tt-lettering h2,
.tt-lettering h3 {
font-size: 36px;
}
}
/*
* Room between the coloured bands (Mel, 22 Oct: "reduce the unusually large
* empty spaces between sections"). A band is three Divi sections: an empty
* one showing the band's top edge, the middle with the content, and an empty
* one showing the bottom edge (class tt-band-edge, inc/bands.php). The edge
* sections were 100 px high at any
* width, though their pictures are only 1.5 to 3.9% of the width high, so
* they were mostly white, on phones nearly all; and the middles kept 54 px or
* more above and below their content. Now an edge section is as high as the
* tallest edge picture plus a little white, its picture across the whole
* width, and a middle keeps a little padding next to an edge.
*/
#et-main-area .et_pb_section.tt-band-edge {
height: calc(3.4vw + 20px);
padding-top: 0;
padding-bottom: 0;
background-size: 100% auto;
}
#et-main-area .tt-band-top + .et_pb_section:not(.tt-band-edge) {
padding-top: 12px;
}
#et-main-area .et_pb_section:not(.tt-band-edge):has(+ .tt-band-bottom) {
padding-bottom: 12px;
}
#et-main-area .tt-band-top + .et_pb_section > .et_pb_row.tt-row-plain:first-child {
padding-top: 0;
}
#et-main-area .et_pb_section:not(.tt-band-edge):has(+ .tt-band-bottom) > .et_pb_row.tt-row-plain:last-child {
padding-bottom: 0;
}
/*
* The course page (bin/build-courses.php; Mel, 23 Oct). The overview: a white
* box with the site's uneven corners per course, two to a row on computers,
* one under the other on phones, the same parts in the same order and the
* «Les mer» button at the bottom of each, the boxes of a row as tall as each
* other. Below, each course's details in a box of its own, the text narrower
* and left-aligned.
*/
.tt-course-cards .et_pb_column.tt-course-card {
display: flex;
flex-direction: column;
padding: 26px 28px 28px;
border: 2px solid #2b2b2b;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
background-color: #eef6ea; /* the soft green of the lessons' «Mias tips» box (Mel, 24 Oct) */
}
.tt-course-card .et_pb_button_module_wrapper {
margin-top: auto;
margin-bottom: 0;
}
/* The price on a line of its own, the same small room above it in each box (Mel, 25 Oct). */
.tt-course-card p:has(+ p.tt-course-price) {
padding-bottom: 0;
}
.tt-course-card p.tt-course-price {
padding-top: 12px;
}
.tt-course-card h2,
.tt-course-detail h2 {
padding-bottom: 6px;
font-size: 30px;
line-height: 1.15;
}
.tt-course-detail h2 {
font-size: 34px;
}
p.tt-course-sub {
padding-bottom: 20px;
color: #004d5e;
font-family: "Atma", cursive;
font-size: 19px;
font-weight: 600;
line-height: 1.3;
}
.tt-course-detail h4 {
padding: 22px 0 8px;
font-size: 20px;
}
/* More room before the speech bubbles, and under the film's button (Mel, 24 Oct). */
.tt-course-detail .et_pb_promo {
margin-top: 34px;
}
.tt-course-detail .tt-video-button {
margin-bottom: 30px;
}
.tt-course-film-heading h3 {
padding: 14px 0 0;
font-size: 26px;
}
.tt-course-detail .et_pb_video.tt-film {
margin-bottom: 12px;
}
/* One under the other: the same room between the boxes of a row and between rows. */
@media (max-width: 980px) {
.tt-course-cards.et_pb_row {
padding-top: 12px;
padding-bottom: 12px;
}
.tt-course-cards .et_pb_column.tt-course-card:not(:last-child) {
margin-bottom: 24px;
}
}
@media (max-width: 767px) {
.tt-course-cards .et_pb_column.tt-course-card {
padding: 20px 18px 22px;
}
/*
* «Neste kurs starter …» small enough for its date, kept on one line by
* inc/line-breaks.php, to fit a phone (Mel, 25 Oct: «1. november 2026!»
* together; the English date is longer). «Velg mellom …» a little smaller
* still, the date the most prominent (Mel, 24 Oct).
*/
.tt-course-intro h1:first-child {
font-size: 32px;
}
html[lang^="en"] .tt-course-intro h1:first-child {
font-size: 30px;
}
.tt-course-intro h1:not(:first-child) {
font-size: 27px;
}
.tt-course-card h2,
.tt-course-detail h2 {
font-size: 28px;
}
}
/*
* Tegn og Trall-babyer's ball decorations, call-to-action modules with only
* the picture: without the room the module keeps for a button, when the
* columns are one under the other (Mel, 25 Oct: smaller gaps around them).
*/
@media (max-width: 980px) {
.et_pb_promo:has(img[src*="balls-2"]) .et_pb_promo_description {
padding-bottom: 0;
}
}
/* More room under a page's heading before its intro in the same text (Mel, 25 Oct: Tilbakemeldinger). */
.tt-page-intro h1 {
padding-bottom: 24px;
}
/* ------------------------------------------------------------------------
* Mini-course: lesson pages and the signup page (bin/build-minicourse.php).
* ---------------------------------------------------------------------- */
/* "Leksjon 1" above a lesson's title. */
.tt-lesson-label {
margin-bottom: 14px;
color: #004d5e;
font-family: "Atma", cursive;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/*
* The site's picture frame: a white paper edge with a thin hand-drawn line,
* as on the pictures already on the site (there it is drawn into each image
* file). Module class tt-frame on a Divi Image or Video module. The line is
* drawn over the paper edge, above the video's picture and not in the way of
* clicks.
*/
.tt-frame .et_pb_image_wrap,
.et_pb_video.tt-frame,
.tt-signboard {
position: relative;
border: 11px solid #fff;
background: #fff;
}
.tt-frame .et_pb_image_wrap::after,
.et_pb_video.tt-frame::after,
.tt-signboard::after {
content: "";
position: absolute;
inset: -9px;
z-index: 3;
background: var(--tt-frame-line) 0 0 / 100% 100% no-repeat;
pointer-events: none;
}
.tt-frame .et_pb_image_wrap img {
display: block;
}
/*
* Room in the mini-course's text (Mel, 21 Oct): under the headings, before a
* heading that starts a new part after a paragraph (lesson 4's tips, «Når
* kommer så de første tegnene?»), and between the tips in a box.
*/
.tt-minicourse .et_pb_text h2,
.tt-minicourse .et_pb_text h3 {
padding-bottom: 16px;
line-height: 1.2;
}
.tt-minicourse .et_pb_text p + h3 {
margin-top: 18px;
}
.tt-minicourse .tt-box p + h4 {
margin-top: 16px;
}
/* «Mias tips», with Mia's face: a little bigger than the box's other headings. */
.tt-minicourse .tt-box h3.tt-tips-title {
padding-bottom: 20px;
font-size: 28px;
}
/*
* Mel's little pictures used like emoji (bin/lib/divi-build.php: Mia's face,
* Mia and Mel together), a little taller than an emoji so the faces show.
*/
img.tt-emoji {
display: inline-block;
width: auto;
height: 1.6em;
margin: 0 0.05em;
vertical-align: -0.45em;
}
/*
* The closing line of each lesson, «… lek, syng og tegn i vei!», with Mia and
* Mel's faces (Mel, 22 Oct): the text a tenth bigger and the faces a fifth
* bigger, still smaller than the «Neste leksjon» heading. In lesson 5 the
* sign-off beneath keeps its size, a little further down.
*/
.tt-minicourse p.tt-closing {
font-size: 1.1em;
}
/* Its parts in lines of even length on phones (Mel, 24 Oct). */
.tt-minicourse #et-main-area p.tt-closing {
text-wrap: balance;
}
.tt-minicourse p.tt-closing img.tt-emoji {
height: 1.75em; /* 1.6em × 1.2 ÷ 1.1 */
}
@media (min-width: 981px) {
.tt-minicourse p.tt-closing img.tt-emoji {
height: 2.1em; /* a fifth bigger again on computers (Mel, 24 Oct) */
vertical-align: -0.62em;
}
}
.tt-minicourse p.tt-closing + p {
margin-top: 0.6em;
}
/*
* On phones each closing is centred: «Lek, syng og tegn i vei!» (or its
* lesson's words) on one line of its own, Mel and Mia's faces centred under
* it (Mel, 25 Oct). The faces come after a tt-phone-break inside the
* phrase's tt-nowrap. Narrower than any phone of today's, the phrase may wrap
* rather than run out of its box.
*/
@media (max-width: 767px) {
.tt-minicourse #et-main-area p.tt-closing {
text-align: center;
}
}
@media (max-width: 359px) {
.tt-minicourse p.tt-closing .tt-nowrap {
white-space: normal;
}
}
/* Lesson 4's title: Mia's face before it on wide screens, centred beneath it on phones (Mel, 22 Oct). */
.tt-phone-only {
display: none;
}
@media (max-width: 767px) {
.tt-wide-only {
display: none;
}
.tt-phone-only {
display: block;
margin-top: 6px;
}
}
/* Words that belong on one line, such as «Tegn og Trall-kurs» (Mel, 22 Oct). */
.tt-nowrap {
white-space: nowrap;
}
/* A character, or a line break, for phones only (Mel, 24 Oct: the English signup heading, lesson 1's closing line). */
.tt-phone-inline,
.tt-phone-break {
display: none;
}
@media (max-width: 767px) {
.tt-phone-inline {
display: inline;
}
.tt-phone-break {
display: block;
}
}
/*
* Line breaks (Mel, 24 Oct): headings balanced, paragraphs without a word
* alone on their last line, in the browsers that can do it. For the others,
* inc/line-breaks.php joins the last words in the page's text.
*/
#et-main-area h1,
#et-main-area h2,
#et-main-area h3,
#et-main-area h4,
.tt-footer-newsletter h2 {
text-wrap: balance;
}
#et-main-area p,
#et-main-area li,
.tt-footer-newsletter p {
text-wrap: pretty;
}
/* The mini-course band's button on phones: narrower, «Les mer om» over «mini-kurset» (Mel, 24 Oct). */
@media (max-width: 767px) {
.tt-mc-band + .et_pb_button_module_wrapper .et_pb_button {
max-width: 12em;
padding: 6px 20px;
line-height: 1.25;
white-space: normal;
text-wrap: balance;
}
}
/*
* A sentence wrapped into lines of even length (Mel, 23 Oct: on Møt oss «vi
* gjorde» ended the bold paragraph alone): each sentence its own little block,
* balanced. Browsers without balancing wrap it as before.
*/
.tt-balance {
display: inline-block;
max-width: 100%;
text-wrap: balance;
}
/*
* The mini-course band on the home and course pages (Mel, 23 Oct): its heading
* as big as «Hva er Tegn og Trall?», the subtitle right under it as part of
* the heading, then as much room before the text as under that heading. On
* the home pages a small «NYHET!» label above it, in the knit's red, tilted
* like the knitted letters.
*/
.tt-mc-band h2 {
padding-bottom: 4px;
font-size: 34px;
line-height: 1.15;
text-wrap: balance;
}
.tt-mc-band p.tt-subtitle {
padding-bottom: 36px;
}
.tt-mc-band p.tt-new {
display: inline-block;
margin-bottom: 12px;
padding: 3px 14px 1px;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
background-color: #d3263a;
color: #fff;
font-family: "Atma", cursive;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.4;
text-transform: uppercase;
transform: rotate(-3deg);
}
/* The heading over the home page film: the sentence Mel says in it (23 Oct). */
.tt-film-heading h2 {
padding-bottom: 6px;
font-size: 34px;
line-height: 1.15;
text-wrap: balance;
}
/*
* Om T&T and About (Mel, 23 Oct): on tablets and phones the speech bubble, the
* balls, the drawing and, under it, «En Tegn og Trall-baby er en lykkeligere
* baby!» in one white box: the two columns' boxes meet. Small gaps between
* them, the sentence close under the drawing (Divi leaves 30 px under each
* picture, the bubble's tail has 29 px of padding under it, and tablets get
* the computer's padding where the boxes meet).
*/
@media (max-width: 980px) {
.tt-happy-row .et_pb_column {
margin-bottom: 0 !important;
}
.tt-happy-row .et_pb_image {
padding-bottom: 0 !important;
}
.tt-happy-row .et_pb_image:not(:last-child) {
margin-bottom: 12px !important;
}
.tt-happy-row .et_pb_column:first-child {
padding-bottom: 8px !important;
}
.tt-happy-row .et_pb_column:last-child {
padding-top: 8px !important;
}
.tt-happy-row .et_pb_column:last-child .et_pb_text {
padding-top: 0 !important;
}
}
/* Tegn og Trall-babyer: the sentence that opens Mel's story, in Atma (23 Oct). */
p.tt-story-intro {
padding-bottom: 12px;
color: #000;
font-family: "Atma", cursive;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
}
/* A line break for wide screens only (Mel, 21 Oct); narrower, the text wraps by itself. */
@media (max-width: 980px) {
br.tt-br-desktop {
display: none;
}
}
/*
* Framed pictures side by side (row class tt-pictures, bin/lib/divi-build.php):
* lesson 1's picture activity, Mel's five drawings (21 Oct). Three to a row on
* computers, two on tablets, one on phones, so they are big enough to look at
* with a baby; a last, shorter row is centred. The text above takes a whole row.
*/
.tt-pictures .et_pb_column {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 26px 24px;
}
.tt-pictures .et_pb_column > .et_pb_module {
flex: 0 1 calc((100% - 48px) / 3);
margin: 0 !important;
}
.tt-pictures .et_pb_column > .et_pb_text {
flex-basis: 100%;
}
@media (max-width: 980px) {
.tt-pictures .et_pb_column > .et_pb_image {
flex-basis: calc((100% - 24px) / 2);
}
}
@media (max-width: 600px) {
.tt-pictures .et_pb_column > .et_pb_image {
flex-basis: 100%;
}
}
/* A highlighted box: soft colour, hand-drawn outline. Module class tt-box on a Text module. */
.tt-box {
padding: 26px 30px;
border: 2px solid #2b2b2b;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
background: #eef6ea;
}
.tt-box.tt-box-pink {
background: #fdf0ee;
}
.tt-box.tt-box-blue {
background: #edf3fa;
}
.tt-box h2,
.tt-box h3,
.tt-box h4 {
font-family: "Atma", cursive;
}
/*
* Mia holding the signboard on the mini-course page: Mel's photo of the blank
* board in the street (20 Oct), framed like the site's other pictures, with
* «Dette får dere:» and the list written on the board. The text sits in the
* board's own area of the photo — 4.3% from the top, 7.6% from the left, 8.2%
* from the right, 39% from the bottom, measured with tools/media/imgtool.swift
* board — and is sized in units of the photo's width, so it scales with it.
*/
.tt-signboard {
max-width: 640px;
margin: 0 auto;
}
.tt-signboard__photo {
position: relative;
container-type: inline-size;
}
.tt-signboard__photo img {
display: block;
width: 100%;
height: auto;
}
.tt-signboard__text {
position: absolute;
top: 4.3%;
right: 8.2%;
bottom: 39%;
left: 7.6%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2cqw 4cqw;
color: #222;
font-family: "Atma", cursive;
text-align: center;
}
.tt-signboard .tt-signboard__heading {
margin: 0 0 2cqw;
padding: 0;
font-size: 5.6cqw;
font-weight: 700;
line-height: 1.1;
}
/* The list as one block in the middle of the board, its lines starting together. */
.tt-signboard ul.tt-signboard__list {
margin: 0;
padding: 0 !important;
list-style: none;
font-size: 3.7cqw;
font-weight: 600;
line-height: 1.25;
text-align: left;
}
.tt-signboard ul.tt-signboard__list li {
margin: 0 0 1.3cqw;
padding: 0;
list-style: none;
}
.tt-signboard ul.tt-signboard__list li:last-child {
margin-bottom: 0;
}
/* Phones: a little larger, using more of the board's width (still inside it with the longer English list). */
@media (max-width: 600px) {
.tt-signboard__text {
padding: 1.5cqw 2.5cqw;
}
.tt-signboard .tt-signboard__heading {
margin-bottom: 1.5cqw;
font-size: 5.4cqw;
}
.tt-signboard ul.tt-signboard__list {
font-size: 4cqw;
}
.tt-signboard ul.tt-signboard__list li {
margin-bottom: 0.9cqw;
}
}
/* The mini-course signup form. */
.tt-signup {
max-width: 520px;
padding: 26px 28px;
border: 2px solid #2b2b2b;
border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
background: #fff;
}
.tt-signup__title {
padding-bottom: 14px;
font-family: "Atma", cursive;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
}
.tt-signup__label {
display: block;
margin-bottom: 4px;
color: #000;
font-weight: 600;
}
.tt-signup__input {
width: 100%;
margin-bottom: 14px;
padding: 12px 14px;
border: 1px solid #8a8a8a;
border-radius: 6px;
color: #000;
font-size: 16px;
}
.tt-signup__check {
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 18px;
color: #000;
font-size: 14px;
line-height: 1.5;
}
.tt-signup__check input {
flex: 0 0 auto;
margin-top: 4px;
}
.tt-signup__button {
display: block;
width: 100%;
padding: 12px 18px;
border: 0;
border-radius: 8px;
/*
* Light grey with a dark outline, as Mel likes it on her Mac. An earlier
* `background` line here was invalid (`initial` cannot stand inside the
* shorthand), so browsers drew their own button: light grey on desktops,
* bright blue on iPhones (Mel, 20 Oct).
*/
-webkit-appearance: none;
appearance: none;
background-color: #efefef;
color: rgba(0, 0, 0, 0.75);
font-family: "Atma", cursive;
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 0 0 2px #2b2b2b;
}
.tt-signup__note {
margin-top: 14px;
color: #000;
font-size: 14px;
}
/* A field only bots fill in (signup.js): out of sight and out of the tab order. */
.tt-hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.tt-signup__button:hover,
.tt-signup__button:focus-visible {
background-color: #e3e3e3;
}
.tt-signup.is-busy .tt-signup__button {
opacity: 0.6;
cursor: progress;
}
/* After a successful signup only the title and the thank-you stay. */
.tt-signup.is-done > :not(.tt-signup__title):not(.tt-signup__message) {
display: none;
}
.tt-signup__message {
margin-top: 14px;
padding-bottom: 0;
color: #000;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
}
.tt-signup__message.is-error {
color: #a4161a;
}
.tt-signup.is-done .tt-signup__message {
margin-top: 0;
font-size: 18px;
}
.tt-signup__intro {
padding-bottom: 14px;
color: #000;
font-size: 16px;
line-height: 1.6;
}
/*
* The newsletter card at the top of the footer (a widget per language, from
* bin/setup-footer-newsletter.php): the full width of the footer, with winking
* Mia peeking out from behind its right edge, on a strip with gently wavy
* edges instead of the footer's grey (Mel, 21 Oct). The strip is drawn behind
* the card, the width of the window: the knit of the site's pink band in grey
* (tools/media/imgtool.swift recolour), the card the pale green of the emails,
* and a narrow white wavy band between the page and the strip (Mel, 22 Oct).
* A white layer behind the strip reaches 16 px higher, its waves in step with
* the strip's; the footer starts 16 px lower, so the white band takes the
* place of the strip's top waves over the page. Her grey after trials of four
* on the home pages (23–25 Oct): #b1b1b1, strikk-gra-5.png, with a layer of
* the same grey at half strength over it, which softens the white lines
* between the stitches by half, so the strip no longer competes with the
* card; its grey stays hers (25 Oct).
*/
#footer-widgets:has(.tt-footer-newsletter) {
padding-top: 50px;
padding-bottom: 0;
}
/*
* The footer in front of the page, so that the strip's top waves lie over the
* page's last section; clipped at its sides, because 100vw includes a classic
* scrollbar and Divi hides sideways overflow on some pages only (found testing
* on dev, 21 Oct: lesson 5 and the blog post scrolled 8 px sideways).
*/
#main-footer:has(.tt-footer-newsletter) {
position: relative;
z-index: 2;
overflow-x: clip;
}
/* (!important: up to 980 px wide, Divi sets two columns with !important.) */
#footer-widgets .footer-widget:has(.tt-footer-newsletter) {
float: none;
width: 100% !important;
margin-right: 0 !important;
margin-bottom: 80px !important; /* the strip's 50 px under the card, then 30 px of the footer's grey */
}
/*
* Divi floats each widget, so it shrank to the card's width and sat at the left,
* and gives it a bottom margin in percent of its column: with the column the
* whole footer, that was some 285 px of blank footer under the card.
*/
#footer-widgets .footer-widget:has(.tt-footer-newsletter) .fwidget {
float: none;
width: auto;
margin-bottom: 0;
}
/* A lighter charcoal than Divi's near-black (#222), with the site's soft colours (Mel, 20 Oct). */
body #main-footer {
background-color: #4a4a4a;
}
/*
* Where the footer has no newsletter card (lessons 1–4, inc/minicourse.php) or
* hides it (a page with its own signup form), its top edge has the same
* gentle wave as the strip's bottom edge everywhere else, instead of a
* straight line (Mel, 26 Oct). The wave rises 16 px over the page above.
*/
#main-footer:not(:has(.tt-footer-newsletter)),
body:has(.et_pb_section form[data-tt-form]) #main-footer {
position: relative;
z-index: 2;
}
#main-footer:not(:has(.tt-footer-newsletter))::before,
body:has(.et_pb_section form[data-tt-form]) #main-footer::before {
content: "";
position: absolute;
top: -16px;
left: 0;
width: 100%;
height: 16px;
background: #4a4a4a;
-webkit-mask: url("data:image/svg+xml;utf8,") left top / 560px 16px repeat-x;
mask: url("data:image/svg+xml;utf8,") left top / 560px 16px repeat-x;
}
/*
* The credit line in the bottom bar (inc/footer-credit.php):
* light on the dark bar, as quiet as the social icons beside it. On phones
* the two parts go on their own lines.
*/
#footer-info,
#footer-info a {
color: rgba(255, 255, 255, 0.72);
font-weight: 400;
}
#footer-info a:hover {
color: #fff;
text-decoration: underline;
}
@media (max-width: 767px) {
#footer-info .tt-credit-sep {
display: block;
height: 0;
overflow: hidden;
}
}
/* Footer columns and text widgets with nothing in them take no room. */
#footer-widgets .footer-widget:not(:has(.tt-footer-newsletter)):not(:has(.textwidget:not(:empty))),
#footer-widgets .widget_text:has(> .textwidget:empty) {
display: none;
}
.tt-footer-newsletter {
position: relative;
z-index: 0; /* its own layer, so that the strip can lie behind the card */
max-width: 620px;
margin: 0 auto;
}
.tt-footer-newsletter::before {
content: "";
position: absolute;
z-index: -1;
top: -50px;
bottom: -50px;
left: 50%;
width: 100vw;
background: linear-gradient(rgba(177, 177, 177, 0.5), rgba(177, 177, 177, 0.5)), url("../img/strikk-gra-5.png") center top / 100% auto repeat-y #fff;
transform: translateX(-50%);
-webkit-mask:
var(--tt-wave-top) left top / 560px 16px repeat-x,
linear-gradient(#000 0 0) center / 100% calc(100% - 30px) no-repeat,
var(--tt-wave-bottom) left bottom / 560px 16px repeat-x;
mask:
var(--tt-wave-top) left top / 560px 16px repeat-x,
linear-gradient(#000 0 0) center / 100% calc(100% - 30px) no-repeat,
var(--tt-wave-bottom) left bottom / 560px 16px repeat-x;
}
.tt-footer-newsletter::after {
content: "";
position: absolute;
z-index: -2;
top: -66px;
left: 50%;
width: 100vw;
height: 40px;
background: #fff;
transform: translateX(-50%);
-webkit-mask:
var(--tt-wave-top) left top / 560px 16px repeat-x,
linear-gradient(#000 0 0) left bottom / 100% calc(100% - 16px) no-repeat;
mask:
var(--tt-wave-top) left top / 560px 16px repeat-x,
linear-gradient(#000 0 0) left bottom / 100% calc(100% - 16px) no-repeat;
}
.tt-footer-newsletter .tt-signup {
position: relative;
z-index: 1;
max-width: none;
background: #eef6ea;
}
.tt-footer-newsletter .tt-signup__title {
color: #000;
}
.tt-footer-newsletter__mia {
position: absolute;
top: 18px;
right: -78px;
width: 120px;
height: auto;
transform: rotate(10deg);
}
/* A page with its own signup form (the mini-course, the newsletter page) does not need the card too. */
body:has(.et_pb_section form[data-tt-form]) .tt-footer-newsletter {
display: none;
}
/*
* Tablets and phones: Mia above the card's right corner, leaning out past its
* edge, so that her body and bent elbow show as on a computer (Mel, 21 Oct:
* with only her face showing, her pose lost its character).
*/
@media (max-width: 980px) {
.tt-footer-newsletter {
padding-top: 96px;
}
/* Less strip above Mia's head: it starts 30 px above her, the white band 16 px higher. */
#footer-widgets:has(.tt-footer-newsletter) {
padding-top: 30px;
}
.tt-footer-newsletter::before {
top: -30px;
}
.tt-footer-newsletter::after {
top: -46px;
}
.tt-footer-newsletter__mia {
top: 4px;
right: -22px;
width: 112px;
transform: rotate(8deg);
}
}
.tt-small {
color: #555;
font-size: 13px;
}
/*
* The language switcher in the main menu (Polylang): hand-drawn flags beside
* «Norsk / English», as Mel asked (16 Oct). The flags are polylang/nb_NO.svg
* and polylang/en_GB.svg in this theme, which Polylang uses instead of its
* own; each is tilted a little and wiggles when pointed at.
*/
.lang-item a {
display: inline-flex !important;
gap: 7px;
align-items: center;
}
.lang-item a img {
--tt-tilt: -6deg;
width: 22px;
height: 16px;
transform: rotate(var(--tt-tilt));
}
.lang-item-en a img {
--tt-tilt: 5deg;
}
/* Full width in the phone menu, so the divider under each item runs across like the others. */
.et_mobile_menu .lang-item a {
display: flex !important;
}
.lang-item a span {
margin-left: 0 !important;
}
.lang-item.current-lang > a {
color: #2b2b2b !important;
font-weight: 700;
}
/*
* In the desktop menu the two read as one control: «Norsk / English». Matched
* by position, not by Polylang's lang-item-first class: Polylang 3.9 dropped it.
*/
#top-menu li.lang-item:has(+ li.lang-item) {
padding-right: 0;
}
/* Divi pads the links below the text for the header's height; set the slash against the top instead. */
#top-menu li.lang-item + li.lang-item {
position: relative;
padding-left: 26px;
}
#top-menu li.lang-item + li.lang-item::before {
content: "/";
position: absolute;
top: 0;
left: 9px;
color: #999;
line-height: 16px;
}
@media (prefers-reduced-motion: no-preference) {
.lang-item a:hover img,
.lang-item a:focus-visible img {
animation: tt-flag-wiggle 0.6s ease-in-out;
}
}
@keyframes tt-flag-wiggle {
0%,
100% {
transform: rotate(var(--tt-tilt));
}
30% {
transform: rotate(calc(var(--tt-tilt) + 12deg));
}
60% {
transform: rotate(calc(var(--tt-tilt) - 8deg));
}
}
/*
* The language switch outside the menu (inc/header.php). On phones under the
* logo, visible without opening the menu (Mel, 20 Oct); on computers at the
* top right of the header, above the menu, so a longer menu (a shop later)
* has room (Mel, 24 Oct).
*/
.tt-lang-bar {
display: none;
margin: 0;
padding: 0;
list-style: none;
}
.tt-lang-bar li {
position: relative;
list-style: none;
}
.tt-lang-bar li + li::before {
content: "/";
position: absolute;
top: 50%;
left: -17px;
color: #999;
transform: translateY(-50%);
}
.tt-lang-bar a {
color: #666;
font-size: 15px;
font-weight: 600;
}
@media (min-width: 981px) {
#top-menu li.lang-item {
display: none !important;
}
.tt-lang-bar {
position: absolute;
top: 18px;
right: 32px; /* the header's own padding (Divi's full-width menu) */
z-index: 3;
display: flex;
gap: 26px;
}
}
@media (max-width: 980px) {
/*
* Divi keeps the logo's box at most 100 px tall here, but the site's own
* custom CSS lets the logo grow to 152 px (".logo_container img"), so on
* tablets the logo spilled below its box — and the switch, which follows
* the box, sat on the logo's line (found testing on dev, 20 Oct).
*/
body.et_header_style_centered header#main-header .logo_container {
max-height: none;
}
.tt-lang-bar {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
gap: 26px;
padding: 6px 0 10px;
}
.et_mobile_menu .lang-item {
display: none !important;
}
}
/*
* Lesson videos (tt-frame) and the bigger films (tt-film: the home page film,
* the online course film, the Tegn og Trall-babyer film; Mel, 23 Oct): no big
* play symbol over the picture; a small button under it instead
* (assets/js/video.js). A click on the picture still plays the video.
*/
.et_pb_video.tt-frame .et_pb_video_play,
.et_pb_video.tt-film .et_pb_video_play {
display: none;
}
.et_pb_video.tt-frame .et_pb_video_overlay,
.et_pb_video.tt-film .et_pb_video_overlay {
cursor: pointer;
}
.tt-video-button {
display: block;
margin: 12px auto 0;
padding: 6px 18px;
border: 0;
border-radius: 8px;
-webkit-appearance: none;
appearance: none;
background-color: #efefef;
box-shadow: 0 0 0 2px #2b2b2b;
color: rgba(0, 0, 0, 0.75);
font-family: "Atma", cursive;
font-size: 18px;
font-weight: 600;
cursor: pointer;
}
.tt-video-button:hover,
.tt-video-button:focus-visible {
background-color: #e3e3e3;
}
/*
* Back to the top (assets/js/site.js; Mel, 23 Oct): a small, discreet round
* button in the bottom right corner, shown once the visitor has scrolled down.
* On phones it sits above the sharing bar at the bottom of the screen.
*/
.tt-to-top {
position: fixed;
right: 16px;
bottom: 20px;
z-index: 9990;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
-webkit-appearance: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 2px #2b2b2b;
color: #2b2b2b;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}
.tt-to-top.is-shown {
opacity: 1;
visibility: visible;
}
.tt-to-top:hover,
.tt-to-top:focus-visible {
background-color: #efefef;
}
@media (max-width: 980px) {
.tt-to-top {
bottom: 64px;
}
}
/*
* Phones (Mel, 24 Oct: it covered text and pictures): smaller, and against the
* screen's edge, in the margin beside the content (Divi's rows are 80% of the
* screen, so a 375 px phone has 37 px on each side).
*/
@media (max-width: 767px) {
.tt-to-top {
right: 2px;
width: 34px;
height: 34px;
box-shadow: 0 0 0 1.5px #2b2b2b;
}
.tt-to-top svg {
width: 18px;
height: 18px;
}
}
/* YouTube in the footer's icons (includes/social_icons.php; Mel, 24 Oct): Divi's own glyph for it. */
.et-social-youtube a.icon::before {
content: "\e0a3";
}