/*
Theme Name: Anna och Jean-Philipe
Theme URI: https://annajp-brollop.online
Description: Bröllopssajt på svenska och bosniska. Fristående tema, inga beroenden.
Author: Pimiento
Version: 3.2.2
Requires at least: 6.0
Tested up to: 7.1
Text Domain: annajp
*/
/* ==================================================================
1. Färger, typsnitt och mått
================================================================== */
:root{
--red:#A0232A;
--red-deep:#7E1B21;
--rose:#A5646E;
--blush:#F4D4DD;
--blush-lt:#FAE7ED;
--greige:#F7F2F0;
--greige-lt:#F7F2F0;
--paper:#F7F2F0;
--ink:#2C2E21;
--ink-soft:#4E5045;
--ink-faint:#8E8F82;
--line:rgba(44,46,33,.15);
--disp:"Fraunces",Georgia,"Times New Roman",serif;
--body:"Work Sans","Helvetica Neue",Arial,sans-serif;
/* Rubrikernas karaktär. SOFT är rundningen, WONK de skeva formerna,
wght tjockleken. Lägre SOFT ger skarpare former.
Vill du prova något annat, byt bara --disp här uppe. */
--disp-vs:"SOFT" 18,"WONK" 1,"opsz" 120,"wght" 330;
--fs-xs:.6875rem; --fs-sm:.8125rem; --fs-base:1rem; --fs-lg:1.125rem;
--fs-h3:1.5rem; --fs-h2:clamp(2rem,6vw,3rem); --fs-h1:clamp(2.9rem,12vw,6.5rem);
--max:76rem; /* samma bredd pa header, innehall och footer */
--measure:44rem; /* lasbredd for lopande text */
--pad:clamp(1.25rem,5vw,3rem);
}
/* ==================================================================
2. Språk. Allt med klassen bs göms på svenska och tvärtom.
================================================================== */
html[data-lang="sv"] .bs{display:none!important}
html[data-lang="bs"] .sv{display:none!important}
/* ==================================================================
3. Grund
================================================================== */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
margin:0; background:var(--greige); color:var(--ink);
font-family:var(--body); font-size:var(--fs-base); font-weight:450; line-height:1.65;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3{
font-family:var(--disp); font-weight:400; margin:0; line-height:1.05;
font-variation-settings:var(--disp-vs); text-wrap:balance;
}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
/* WordPress lägger ibland in tomma stycken kring inklistrad html */
p:empty{display:none}
a{color:var(--red); text-underline-offset:.22em; text-decoration-thickness:1px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--red); outline-offset:3px}
img{max-width:100%; height:auto; display:block}
ul,ol{margin:0 0 1.1rem; padding-left:1.15rem}
li{margin-bottom:.4rem}
.eyebrow{font-size:var(--fs-xs); font-weight:500; letter-spacing:.24em;
text-transform:uppercase; color:var(--rose); margin-bottom:.9rem}
h1{font-size:var(--fs-h1); color:var(--red); text-transform:uppercase; letter-spacing:-.01em}
h2{font-size:var(--fs-h2); color:var(--red); text-transform:uppercase; margin-bottom:1.25rem}
h3{font-size:var(--fs-h3); color:var(--ink); margin-bottom:.6rem}
.lede{font-size:1.0625rem; color:var(--ink-soft); line-height:1.6}
.sub{color:var(--ink-soft)}
.center{text-align:center}
.wrap{max-width:var(--measure); margin-inline:auto}
.wide{max-width:var(--max); margin-inline:auto}
/* ==================================================================
4. Festongkant
================================================================== */
.scallop{
height:20px; background:var(--sc,var(--paper)); position:relative; z-index:1;
-webkit-mask:radial-gradient(circle at 50% 100%, transparent 10px, #000 10.5px) 0 0/20px 20px repeat-x;
mask:radial-gradient(circle at 50% 100%, transparent 10px, #000 10.5px) 0 0/20px 20px repeat-x;
}
/* ==================================================================
5. Header och meny
================================================================== */
.jp-header{position:sticky; top:0; z-index:40; background:var(--greige); border-bottom:1px solid var(--line); padding:0 var(--pad)}
.jp-bar{max-width:var(--max); margin-inline:auto; padding:.8rem 0;
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.75rem}
.jp-brand{grid-column:2; font-family:var(--disp); font-size:1.0625rem; letter-spacing:.16em;
text-transform:uppercase; color:var(--red); text-decoration:none; white-space:nowrap;
font-variation-settings:var(--disp-vs)}
.b-short{display:none}
.jp-menu-btn{grid-column:1; justify-self:start; background:none; border:0; cursor:pointer;
display:flex; align-items:center; gap:.55rem; font-size:var(--fs-xs); letter-spacing:.2em;
text-transform:uppercase; color:var(--ink); padding:.35rem 0}
.jp-menu-btn i{display:block; width:22px; height:9px; border-top:1.5px solid var(--ink);
border-bottom:1.5px solid var(--ink); flex:none}
.jp-lang{grid-column:3; justify-self:end; display:flex; border:1px solid var(--line); background:var(--paper)}
.jp-lang button{background:none; border:0; cursor:pointer; padding:.38rem .75rem; color:var(--ink-soft); font-weight:500;
font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap}
.jp-lang button + button{border-left:1px solid var(--line)}
.jp-lang button[aria-pressed="true"]{background:var(--red); color:var(--greige-lt)}
.jp-lang .abbr{display:none}
@media (max-width:820px){
.b-full{display:none} .b-short{display:inline}
.jp-lang .full{display:none} .jp-lang .abbr{display:inline}
.jp-lang button{padding:.38rem .6rem}
}
@media (max-width:420px){ .jp-menu-btn span{display:none} }
.jp-overlay{position:fixed; inset:0; z-index:50; background:var(--greige-lt);
display:flex; flex-direction:column; justify-content:center; align-items:center;
padding:var(--pad); overflow:auto}
.jp-overlay .close{position:absolute; top:1.05rem; right:var(--pad); background:none; border:0;
cursor:pointer; font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
.jp-overlay ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
align-items:center; gap:.3rem; width:100%}
.jp-overlay li{margin:0}
.jp-overlay a{font-family:var(--disp); font-size:clamp(1.8rem,7vw,2.8rem); text-transform:uppercase;
color:var(--red); text-decoration:none; font-variation-settings:var(--disp-vs);
line-height:1.15; padding:.1rem .4rem; display:block}
.jp-overlay a:hover,.jp-overlay .current-menu-item a{color:var(--ink)}
.jp-overlay .foot{margin-top:2rem; text-align:center; color:var(--ink-soft); font-size:var(--fs-sm)}
/* ==================================================================
6. Sektioner
================================================================== */
.band{padding:clamp(3rem,8vw,5rem) var(--pad)}
.band.paper{background:var(--paper)}
.band.lt{background:var(--blush-lt)}
.band.blush{background:var(--blush)}
.band.blush .sub,.band.blush .kv small{color:#6E4750}
.band.blush .eyebrow{color:var(--red)}
.hero{background:var(--greige); padding:clamp(2.5rem,7vw,4.5rem) var(--pad) clamp(2rem,5vw,3rem); text-align:center}
.hero .amp{display:block; font-size:.38em; color:var(--rose); margin:.12em 0}
.when{margin-top:1.5rem; font-family:var(--disp); font-size:clamp(1.15rem,3.4vw,1.5rem);
text-transform:uppercase; letter-spacing:.1em}
.where{margin-top:.35rem; font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.cd{margin:1.75rem auto 0; display:flex; justify-content:center; gap:clamp(1.1rem,5vw,2.5rem)}
.cd b{display:block; font-family:var(--disp); font-size:1.9rem; font-weight:400; color:var(--red);
font-variant-numeric:tabular-nums; line-height:1}
.cd span{font-size:var(--fs-xs); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.cta{display:inline-block; background:var(--red); color:var(--greige-lt); border:0; cursor:pointer;
padding:.95rem 2.2rem; font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
font-weight:500; text-decoration:none}
.cta:hover{background:var(--red-deep); color:var(--greige-lt)}
.cta-ghost{background:none; color:var(--red); border:1px solid var(--red); padding:calc(.95rem - 1px) calc(2.2rem - 1px)}
.cta-ghost:hover{background:var(--red); color:var(--greige-lt)}
.cta-row{margin-top:2.25rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; align-items:center}
.cta-note{margin-top:.9rem; font-size:var(--fs-sm); color:var(--ink-soft)}
.doodle{display:block; margin:0 auto 1.25rem; color:var(--rose)}
/* Bra att veta */
.kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:2rem; margin-top:2.5rem}
.kv dt,.kv .k{font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
color:var(--red); margin-bottom:.5rem}
.kv dd,.kv .v{margin:0; font-family:var(--disp); font-size:1.125rem; line-height:1.35}
.kv small{display:block; margin-top:.35rem; font-family:var(--body); font-size:var(--fs-sm);
color:var(--ink-soft); line-height:1.5}
/* Kort till undersidor */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1px;
background:var(--line); border:1px solid var(--line); margin-top:2.5rem}
.card{background:var(--paper); padding:1.5rem 1.4rem; display:flex; flex-direction:column;
gap:.45rem; text-decoration:none}
.card:hover{background:var(--blush-lt)}
.card .k{font-family:var(--disp); font-size:1.3rem; color:var(--red); text-transform:uppercase;
font-variation-settings:var(--disp-vs)}
.card .v{font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55}
/* Bilder */
/* Mosaik. Ett stort motiv till vänster, två mindre staplade till höger.
Radhöjden är fast, så rutorna hamnar alltid i linje oavsett bildformat. */
.slots{
display:grid; grid-template-columns:repeat(3,1fr);
grid-auto-rows:clamp(8rem,15vw,15rem);
gap:.9rem; margin-top:2.5rem;
}
.slots > *{margin:0; min-width:0; min-height:0; overflow:hidden}
.slots > *:nth-child(1){grid-column:span 2; grid-row:span 2}
.slots > *:nth-child(4){grid-column:span 3}
.slot{
height:100%; background:var(--greige); border:1px solid var(--line);
display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
color:var(--ink-faint); font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
}
.slots img{width:100%; height:100%; object-fit:cover}
.slot.has-img{border:0; padding:0; background:none; display:block}
.slot.has-img img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:600px){
.slots{grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(6.5rem,26vw,10rem)}
.slots > *:nth-child(1){grid-column:span 2; grid-row:span 2}
.slots > *:nth-child(4){grid-column:span 2}
}
/* Tidslinje */
.tl{margin-top:2rem}
.tl-row{display:grid; grid-template-columns:4.75rem 1fr; gap:1.25rem; padding:1.2rem 0;
border-top:1px solid var(--line); align-items:start}
.tl-row:last-child{border-bottom:1px solid var(--line)}
.tl-time{font-family:var(--disp); font-size:1.0625rem; color:var(--red);
font-variant-numeric:tabular-nums; letter-spacing:.04em}
.tl-what{font-family:var(--disp); font-size:1.1875rem; margin-bottom:.15rem}
.tl-note{font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55; margin:0}
@media (max-width:520px){.tl-row{grid-template-columns:3.9rem 1fr; gap:.9rem}}
/* Rader */
.rows{margin-top:1.75rem}
.row{padding:1.25rem 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
gap:.4rem 1rem; align-items:baseline}
.rows .row:last-child{border-bottom:1px solid var(--line)}
.row-name{font-family:var(--disp); font-size:1.1875rem; flex:1 1 auto}
.row-meta{flex:1 1 100%; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.55; margin:0}
.tag{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--rose); white-space:nowrap}
/* Boende */
.stay{display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:1.75rem;
padding:2.25rem 0; border-top:1px solid var(--line); align-items:start}
.stay:last-of-type{border-bottom:1px solid var(--line)}
.stay .slot,.stay img{aspect-ratio:1; margin:0}
.stay-body{display:flex; flex-direction:column; gap:.55rem}
.stay-top{display:flex; flex-wrap:wrap; gap:.3rem 1rem; align-items:baseline}
.stay-name{font-family:var(--disp); font-size:1.3125rem; flex:1 1 auto}
.stay-price{font-family:var(--disp); font-size:1.0625rem; color:var(--red); white-space:nowrap;
font-variant-numeric:tabular-nums}
.stay-meta{font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6; margin:0}
.codeline{display:inline-flex; align-items:baseline; gap:.55rem; align-self:flex-start;
border:1px solid var(--line); background:var(--blush-lt); padding:.4rem .75rem; margin:.2rem 0 0}
.codeline span{font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
.codeline b{font-family:var(--disp); font-weight:400; font-size:1rem; color:var(--red); letter-spacing:.1em}
.stay.soon{opacity:.72}
@media (max-width:640px){.stay{grid-template-columns:1fr} .stay .slot,.stay img{aspect-ratio:16/9}}
/* FAQ */
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; position:relative;
font-family:var(--disp); font-size:1.125rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:.25rem; top:1rem; color:var(--red);
font-size:1.25rem; line-height:1}
details[open] summary::after{content:"\2013"}
details p{padding:0 0 1.2rem; font-size:var(--fs-sm); color:var(--ink-soft); line-height:1.6;
max-width:34rem; margin:0}
/* ==================================================================
7. Formulär och OSA
================================================================== */
.jp label{display:block; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase;
color:var(--ink-soft); margin-bottom:.4rem}
.jp input[type=text],.jp input[type=email],.jp input[type=tel],.jp textarea{
width:100%; font:inherit; font-size:var(--fs-base); color:var(--ink); background:var(--paper);
border:1px solid var(--line); border-radius:0; padding:.75rem .9rem}
.jp input:not([type=radio]):not([type=checkbox]):focus,.jp textarea:focus{border-color:var(--red); outline:none}
.jp textarea{min-height:5.5rem; resize:vertical}
.jp ::placeholder{color:var(--ink-faint)}
.jp fieldset{border:0; margin:0; padding:0}
.field{margin-bottom:1.25rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.hint{margin:.5rem 0 0; font-size:var(--fs-sm); line-height:1.55; color:var(--rose)}
.chips{display:flex; flex-wrap:wrap; gap:.45rem}
.chips label{margin:0; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
border:1px solid var(--line); background:var(--paper); padding:.45rem .85rem;
font-size:var(--fs-sm); letter-spacing:0; text-transform:none; color:var(--ink)}
.chips input{accent-color:var(--red); margin:0}
.chips label:has(input:checked){border-color:var(--red); color:var(--red); background:var(--blush-lt)}
.search{position:relative}
.sugg{position:absolute; left:0; right:0; top:calc(100% - 1px); z-index:5; background:var(--paper);
border:1px solid var(--red); max-height:16rem; overflow:auto}
.sugg button{display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
padding:.75rem .9rem; border-bottom:1px solid var(--line)}
.sugg button:last-child{border-bottom:0}
.sugg button:hover{background:var(--blush-lt)}
.sugg .who{font-family:var(--disp); font-size:1.0625rem}
.sugg .meta{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.nomatch{border:1px solid var(--line); background:var(--blush-lt); padding:1rem;
font-size:var(--fs-sm); color:var(--ink-soft); margin-top:1rem}
.person{border:1px solid var(--line); background:var(--paper); padding:1.35rem; margin-bottom:1rem}
.person-head{margin-bottom:1rem}
.person-head b{font-family:var(--disp); font-weight:400; font-size:1.25rem; color:var(--red)}
.person .field:last-child{margin-bottom:0}
.hh{display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
padding-bottom:.9rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line)}
.hh b{font-family:var(--disp); font-weight:400; font-size:1.25rem}
.link{background:none; border:0; cursor:pointer; color:var(--red); font-size:var(--fs-sm);
text-decoration:underline; text-underline-offset:.25em; padding:0}
.done{background:var(--paper); border:1px solid var(--line); padding:clamp(2rem,6vw,3rem); text-align:center}
.sum{padding:1.1rem 0; border-top:1px solid var(--line)}
.sum:last-child{border-bottom:1px solid var(--line)}
.sum-name{font-family:var(--disp); font-size:1.1875rem; color:var(--ink); margin:0 0 .35rem}
.sum-line{font-size:var(--fs-sm); line-height:1.7; color:var(--ink-soft); margin:0}
/* ==================================================================
8. Footer
================================================================== */
.jp-footer{background:var(--red); color:var(--greige-lt); padding:3.25rem var(--pad) 2.5rem}
.jp-footer-inner{max-width:var(--max); margin-inline:auto}
.jp-footer p{margin:0; font-size:.9375rem; color:rgba(243,240,236,.88); line-height:1.6}
.jp-footer a{color:var(--greige-lt); text-decoration-color:rgba(243,240,236,.5); overflow-wrap:anywhere}
.jp-footer a:hover{text-decoration-color:var(--greige-lt)}
.jp-footer-top{text-align:center; padding-bottom:2.25rem}
.jp-footer .fname{font-family:var(--disp); font-size:1.5rem; letter-spacing:.16em;
text-transform:uppercase; font-variation-settings:var(--disp-vs); color:var(--greige-lt)}
.jp-footer .fdate{margin-top:.5rem; font-size:var(--fs-xs); letter-spacing:.2em;
text-transform:uppercase; color:var(--blush)}
.jp-footer-cols{
display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
gap:2.25rem; padding:2.25rem 0;
border-top:1px solid rgba(243,240,236,.22); border-bottom:1px solid rgba(243,240,236,.22);
}
.jp-footer-cols > div > p + p{margin-top:.4rem}
.jp-footer .fk{font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
color:var(--blush); margin-bottom:.55rem}
.jp-footer .fsmall{font-size:.8125rem; color:rgba(243,240,236,.62); line-height:1.65}
.jp-footer-bottom{text-align:center; padding-top:1.75rem; font-size:.75rem;
letter-spacing:.2em; text-transform:uppercase; color:var(--blush)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
/* ==================================================================
9. Läsbarhet, bredd och knappar
================================================================== */
/* Den lilla, dämpade texten fick både mer tyngd och mörkare ton. */
.sub, .tl-note, .row-meta, .stay-meta, .kv small, .hint,
.card .v, .sum-line, .cta-note, .nomatch, .jp-footer p{ font-weight:500 }
/* Heroinnehållet håller samma bredd som resten av sajten. */
.hero > *{max-width:var(--max); margin-inline:auto}
/* Knappar sida vid sida får samma höjd. */
.cta-row .cta{display:inline-flex; align-items:center; justify-content:center; text-align:center}
/* På mobil staplas de och blir exakt lika breda, oavsett textlängd. */
@media (max-width:560px){
.cta-row{flex-direction:column; align-items:stretch}
.cta-row .cta{width:100%}
}
/* WordPress lägger
mellan inklistrade block. I rutnäten blir de
egna, tomma rutor. Här städas de bort. */
.cards > br, .slots > br, .kv > br, .rows > br, .tl > br, .stay > br,
.card > br, .kv > div > br, .stay-body > br{display:none}
.cards > *:not(.card){display:none}
/* ==================================================================
10. Optisk viktning
Stora rubriker klarar sig tunna, små behöver mer tyngd.
Brödtext är tvärtom: liten text tål vikt, stor text ska vara lättare.
================================================================== */
:root{ --disp-vs-sm:"SOFT" 18,"WONK" 1,"opsz" 24,"wght" 440; }
h3, summary,
.jp-brand, .when, .cd b,
.card .k, .row-name, .tl-what, .tl-time,
.stay-name, .stay-price, .code b,
.sum-name, .hh b, .person-head b,
.jp-footer .fname{ font-variation-settings:var(--disp-vs-sm) }
.lede{ font-weight:400 }
/* ==================================================================
11. Finjustering av vikter
H1 sitter rätt. Mellanrubrikerna behövde en halv vikt till,
och mellanstor brödtext likaså, i utbyte mot något mindre grad.
================================================================== */
:root{ --disp-vs-h2:"SOFT" 18,"WONK" 1,"opsz" 90,"wght" 380; }
h2{ font-variation-settings:var(--disp-vs-h2) }
.lede{ font-size:1rem; font-weight:450 }
/* Småetiketterna är spärrade versaler i liten grad och blir tunna. */
.eyebrow{ font-weight:600 }
/* Footern: läsbar kontrast mot det röda i alla grader. */
.jp-footer .fsmall{ color:rgba(243,240,236,.8) }
.jp-footer-bottom{ font-size:.8125rem; letter-spacing:.16em; color:var(--blush) }
/* ==================================================================
12. Detaljer
================================================================== */
/* Brödtext i normalstorlek ska väga lika mycket överallt.
Startsidans ingress är måttstocken. */
.sub{ font-weight:450 }
/* Plustecknet mitt i raden, oavsett hur många rader frågan tar. */
summary{ padding-right:2.25rem }
summary::after{ top:50%; transform:translateY(-50%); line-height:1 }
/* ==================================================================
13. Knappraden fyller alltid full bredd
En knapp tar hela raden. Två delar den lika. Tre likaså.
================================================================== */
.cta-row{display:flex; gap:.75rem; width:100%}
.cta-row > .cta{flex:1 1 0; min-width:0}
/* WordPress lägger en
mellan knapparna. Den blir annars ett tomt mellanrum när de staplas på mobil. */
.cta-row > br{display:none}
/* Knappar utanför en rad, till exempel Skicka i formulären. */
form > .cta, .done .cta{width:100%; display:inline-flex;
align-items:center; justify-content:center; text-align:center}
@media (max-width:560px){
.cta-row{flex-direction:column}
.cta-row > .cta{width:100%}
}
/* I heron är textspalten måttet, inte hela sidbredden. */
.hero .cta-row{max-width:var(--measure); margin-inline:auto}
/* ==================================================================
14. Färgstädning
En enda beige på hela sajten, den ljusa. Röd sparas till
rubriker, knappar och små accenter. Språkväxlaren blir neutral.
================================================================== */
:root{
--greige:#F7F2F0; /* heroens ton, all bakgrund som inte är rosa eller röd */
--greige-lt:#F7F2F0;
--slot:#ECE3E1; /* något mörkare, bara för tomma bildrutor */
}
.slot{ background:var(--slot) }
/* Språkvalet behöver inte skrika. Mörkt i stället för rött. */
.jp-lang{ border-color:rgba(44,46,33,.22) }
.jp-lang button[aria-pressed="true"]{ background:var(--ink); color:#F3F0EC }
.jp-lang button:hover{ color:var(--ink) }
/* ==================================================================
15. Rättningar
================================================================== */
/* Språkvalet tillbaka till rött. */
.jp-lang button[aria-pressed="true"]{ background:var(--red); color:#F3F0EC }
/* WordPress kan svepa in bilder i eller . Då ska
omslaget bli rutan i mosaiken, inte bilden. */
.slots > p, .slots > figure{margin:0; height:100%; overflow:hidden}
.slots > p > img, .slots > figure > img{width:100%; height:100%; object-fit:cover}
.slots figcaption{display:none}
/* Fler träffar än vi visar. */
.sugg-hint{padding:.7rem .9rem; border-top:1px solid var(--line);
font-size:var(--fs-sm); color:var(--ink-soft); background:var(--blush-lt)}
/* Aktiv sida i menyn: understruken i stället för svart. */
.jp-overlay a:hover,
.jp-overlay .current-menu-item a,
.jp-overlay .current_page_item a{
color:var(--red); text-decoration:underline;
text-decoration-thickness:1.5px; text-underline-offset:.14em;
}
/* Barn behöver varken intresse eller önskelåt. */
.is-barn .f-interest, .is-barn .f-song{display:none}
.is-barn .f-allergy{margin-bottom:0}
/* ==================================================================
16. Volangen
Förr målades bubblorna av sidans bakgrund, alltså alltid krämvitt.
Låg nästa sektion i samma ton försvann volangen. Nu ritas bubblorna
i stället som en egen färg, --sc-under, så den går att styra.
--sc är bandet, --sc-under är bubblorna.
================================================================== */
:root{ --sc-mid:#EEDFE0 }
.scallop{
-webkit-mask:none; mask:none;
background:
radial-gradient(circle at 50% 100%,
var(--sc-under,var(--greige)) 10px, rgba(0,0,0,0) 10.5px) 0 0/20px 20px repeat-x,
var(--sc,var(--paper));
}
/* ==================================================================
17. Namnen i Golden Hopes och kortets färger
Färgerna byttes i avsnitt 1 och 14. Här bara typsnittet för namnen.
================================================================== */
@font-face{font-family:"Golden Hopes";src:url(kuvert/golden-hopes.woff2) format("woff2");font-display:block}
:root{ --names:"Golden Hopes","Brush Script MT",cursive }
.hero h1,.jp-brand,.jp-footer .fname{
font-family:var(--names); font-weight:400; font-variation-settings:normal;
text-transform:none; letter-spacing:0; font-feature-settings:"calt","liga";
/* Skrivstilens tecken sitter 0,03 em över radens mitt, uppmätt i typsnittsfilen. */
transform:translateY(.035em);
}
.hero h1{font-size:clamp(3.4rem,13vw,7rem); line-height:1.15; padding-block:.08em}
.hero .amp{display:inline; font-size:.8em; margin:0 .12em; color:inherit}
.jp-brand{font-size:1.85rem; line-height:1; display:inline-block}
.jp-footer .fname{font-size:2.8rem; line-height:1.1}
/* 2026-10-20: small, consistent refinements to the existing theme. */
:root{
--ink:#2D2B29;--ink-soft:#5B5653;--ink-faint:#706964;--rose:#8D505B;
--fs-base:clamp(1rem,.975rem + .125vw,1.0625rem);--fs-sm:.875rem;--fs-xs:.75rem;
--ease-out:cubic-bezier(.23,1,.32,1);--motion-press:120ms;--motion-color:240ms;
}
body{font-weight:400}
.jp .sub,.jp .lede{font-size:var(--fs-base);font-weight:400}
.jp .card .v,.jp .row-meta,.jp .tl-note,.jp .stay-meta,.jp .kv small,.jp .sum-line{font-weight:400;line-height:1.65}
.jp .hint{color:var(--ink-soft);font-weight:400}
.jp .card .k{font-size:1.375rem}
.jp .cta{font-size:.875rem;letter-spacing:.12em;line-height:1.35;min-height:48px;
transition:background-color var(--motion-color) ease,color var(--motion-color) ease,border-color var(--motion-color) ease,transform var(--motion-press) var(--ease-out)}
.jp .cta-ghost{border:1px solid var(--red);background:transparent;color:var(--red);text-decoration:none;padding:calc(.95rem - 1px) calc(2.2rem - 1px)}
/* On touch, keep the resting appearance after a tap. Press feedback is immediate. */
@media(hover:none){.jp .cta:hover{background:var(--red);color:var(--greige-lt)}.jp .cta-ghost:hover{background:transparent;color:var(--red)}.jp .card:hover{background:var(--paper)}}
.jp .cta:active{transform:scale(.985);transition-duration:80ms}
.jp-lang button,.jp-menu-btn,.jp-overlay a,.jp-overlay .close,.jp .card,.jp .link,.jp summary{
transition:background-color var(--motion-color) ease,color var(--motion-color) ease,border-color var(--motion-color) ease}
.jp-menu-btn,.jp-overlay .close{min-height:44px;min-width:44px}
.jp-overlay{will-change:opacity,transform}
.jp-overlay .close{padding:8px}
.jp-overlay a{padding:.3rem .4rem;line-height:1.2}
.jp-overlay a:focus-visible{outline-color:var(--red)}
.jp-lang button{min-height:36px}
.jp .link{min-height:44px}
@media(hover:hover) and (pointer:fine){
.jp .cta:not(.cta-ghost):not(:disabled):hover{background:var(--red-deep);color:var(--paper)}
.jp .cta-ghost:hover{background:var(--red);color:var(--paper);border-color:var(--red)}
.jp .link:hover{color:var(--red-deep)}
.jp .card:hover{background:var(--blush)}
.jp-menu-btn:hover,.jp-overlay .close:hover{color:var(--red)}
.jp-lang button:not([aria-pressed="true"]):hover{background:var(--blush-lt);color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){
.jp .cta:active{transform:none}
.jp-overlay{will-change:auto}
}
/* Travel page keeps the WordPress template and the site's spacing tokens. */
.page-id-28 main.jp > .band{padding:0}
.page-id-28 main.jp > .band > .wrap{max-width:none}
.travel-intro{padding:clamp(2.5rem,6vw,5rem) var(--pad) clamp(2rem,5vw,3.5rem);text-align:center}
.travel-intro h1{font-size:clamp(3rem,7vw,5.25rem);margin:.35rem 0 1rem;line-height:1.05}
.travel-intro .sub{max-width:38rem;margin:0 auto;font-size:1.0625rem;line-height:1.7;text-wrap:balance}
.travel-places{max-width:var(--max);padding:0 var(--pad);margin:0 auto 4rem}
.travel-place{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1.15fr 1fr;align-items:center;scroll-margin-top:100px;padding:0 0 clamp(3.5rem,7vw,6rem)}
.travel-place+.travel-place{padding-top:1rem}
.travel-place figure{margin:0;min-width:0}
.travel-place img{display:block;width:100%;height:auto;aspect-ratio:1.5;object-fit:cover}
.travel-place:nth-child(2) img{object-position:center bottom}
.travel-place .place-copy{max-width:30rem;min-width:0}
.travel-place h2{font-size:var(--fs-h2);font-variation-settings:var(--disp-vs-h2);line-height:1.05;margin:0 0 1.25rem;text-wrap:balance}
.travel-place .place-label{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.18em;color:var(--red);margin:0}
.travel-place p{font-size:1rem;line-height:1.75;margin:0 0 1.15rem}
.travel-place .place-address{font-size:.875rem;color:var(--ink-soft);margin-bottom:1.75rem}
.travel-place .place-time{font-size:1.125rem;color:var(--red);margin-bottom:.6rem}
.travel-place .cta{min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.4;max-width:100%;font-size:.75rem;padding:.95rem 1.5rem}
.travel-place .place-note{font-size:.875rem;margin-top:1.5rem;margin-bottom:0;color:var(--ink-soft)}
.travel-place:nth-child(2) figure{grid-column:2;grid-row:1}
.travel-place:nth-child(2) .place-copy{grid-column:1;grid-row:1}
.travel-place:nth-child(2){grid-template-columns:1fr 1.15fr}
.travel-place .route-link{display:inline-block;padding:10px 0;color:var(--red);font-size:.875rem;text-decoration:underline;text-underline-offset:5px;min-height:44px;margin-top:.4rem}
@media(max-width:820px){
.travel-intro{padding-top:2.5rem;padding-bottom:2rem}
.travel-intro .sub{font-size:1rem}
.travel-places{margin-bottom:1rem}
.travel-place,.travel-place:nth-child(2){display:flex;flex-direction:column;align-items:stretch;gap:1.5rem;padding-bottom:3.5rem}
.travel-place+.travel-place{padding-top:0}
.travel-place .place-copy{max-width:none}
.travel-place .cta{width:100%}
.travel-place .place-address{margin-bottom:1.25rem}
.travel-place .place-note{margin-top:1rem}
}
.travel .place-copy p{font-size:var(--fs-base)}
.travel .place-copy .place-label,.travel .place-copy .place-address,.travel .place-copy .place-note{font-size:var(--fs-sm)}
.travel .place-copy .place-label{font-size:var(--fs-xs);letter-spacing:.16em}
.travel .place-copy .place-time{font-size:1.125rem}
.travel .place-copy .cta{font-size:.875rem}
.travel .travel-intro .sub{font-size:var(--fs-base)}
.travel-source{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 1.75rem;color:var(--ink-soft);font-size:.75rem;line-height:1.6}
.travel-source a{color:inherit}
/* Shared title treatment follows the existing undersides, including their optical weight. */
.travel-intro{padding:clamp(3rem,8vw,5rem) var(--pad) clamp(2rem,5vw,3rem)}
.travel-intro h1{font-size:var(--fs-h2);font-variation-settings:var(--disp-vs-h2);line-height:1.05;letter-spacing:normal;margin:0 0 1.25rem}
.travel-intro .sub{max-width:var(--measure);line-height:1.6}
/* Every control has a clear, theme-coloured hover, without moving the layout. */
.jp-brand,.jp-footer a,.jp a:not(.cta):not(.card),.jp input,.jp textarea,.jp .chips label,.jp .sugg button{
transition:color var(--motion-color) ease,background-color var(--motion-color) ease,border-color var(--motion-color) ease,text-decoration-color var(--motion-color) ease}
.jp-menu-btn i{transition:border-color var(--motion-color) ease}
.jp-overlay a{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em}
.jp-overlay .current-menu-item a{color:var(--red-deep);text-decoration-color:currentColor}
.jpw-dialog button.jpw-skip,.jpw-dialog button.jpw-continue{transition:background-color var(--motion-color) ease,color var(--motion-color) ease,border-color var(--motion-color) ease}
@media(hover:hover) and (pointer:fine){
.jp-brand:hover{color:var(--red-deep)}
.jp-menu-btn:hover i{border-color:var(--red)}
.jp-lang button[aria-pressed="true"]:hover{background:var(--red-deep);color:var(--paper)}
.jp-overlay a:hover{color:var(--red-deep);background:transparent}
.jp-overlay .close:hover{color:var(--red-deep);text-decoration:underline;text-underline-offset:.3em}
.jp a:not(.cta):not(.card):hover{color:var(--red-deep);text-decoration-color:currentColor;text-decoration-thickness:1px}
.jp .card:hover .k{color:var(--red-deep)}
.jp .link:hover{background:transparent;color:var(--red-deep)}
.jp summary:hover{color:var(--red-deep);background:transparent}
.jp input:not([type=radio]):not([type=checkbox]):not(:focus):not(:disabled):hover,.jp textarea:not(:focus):not(:disabled):hover{border-color:var(--rose)}
.jp .chips label:hover,.jp .sugg button:hover{background:var(--blush);border-color:var(--rose)}
.jp-footer a:hover{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
body .jpw-replay:hover{background:var(--blush-lt);border-color:var(--rose)}
.jpw-dialog button.jpw-skip:hover,.jpw-dialog button.jpw-continue:hover{background:var(--red-deep);color:var(--paper)}
}
/* Square language switch: one border, no divider, one sliding selection. */
.jp-lang{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;padding:0;border:0;background:transparent;gap:0}
.jp-lang::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:50%;background:var(--red);transform:translateX(0);transition:transform 380ms cubic-bezier(.4,0,.2,1)}
html[data-lang="bs"] .jp-lang::before{transform:translateX(100%)}
.jp-lang button,.jp-lang button+button{border:0;background:transparent;color:var(--ink-soft);transition:color 300ms ease}
.jp-lang button[aria-pressed="true"]{background:transparent;color:var(--paper)}
@media(hover:hover) and (pointer:fine){
.jp-lang button:not([aria-pressed="true"]):hover{background:transparent;color:var(--red-deep)}
.jp-lang button[aria-pressed="true"]:hover{background:transparent;color:var(--paper)}
}
/* The same underline transition for navigation, travel and footer text links. */
.jp-overlay a,.jp-footer a,.jp .travel-place a.route-link{
text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.3em;
transition:color 320ms ease,text-decoration-color 320ms ease;
}
.jp-overlay a{text-decoration-color:transparent}
.jp-footer a{ text-decoration-color:rgba(247,242,240,.5)}
.travel-place .route-link{text-decoration-color:rgba(160,35,42,.4)}
@media(hover:hover) and (pointer:fine){
.jp-overlay a:hover,.jp-footer a:hover,.jp .travel-place .route-link:hover{background:transparent;text-decoration-color:currentColor;text-decoration-thickness:1px}
}
.jp-overlay a:focus-visible,.jp-footer a:focus-visible,.travel-place .route-link:focus-visible{text-decoration-color:currentColor}
.jp details,.jp summary,.jp details[open]{background:transparent}
.jp summary{transition:color 240ms ease}
.jp input[type=text],.jp input[type=email],.jp input[type=tel],.jp textarea{background:#FFFDFC;border-color:#C9BFBB}
.jp input:not([type=radio]):not([type=checkbox]):focus,.jp textarea:focus{background:#fff;border-color:var(--red);outline:2px solid #A0232A22;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.jp-lang::before{transition:none}}
/* Immediate feedback on the small menu trigger; slower transitions belong to content. */
.jp-menu-btn{transition:color 140ms ease}
.jp-menu-btn i{transition:border-color 140ms ease}
.jp-overlay a{transition:color 180ms ease,text-decoration-color 180ms ease}
.done{scroll-margin:100px}
.done h3:focus{outline:none}
.photo-source{display:block}
.photo-source:focus-visible{outline-offset:4px}
/* A single, fixed underline: hover never changes its vertical position. */
.jp-overlay a,.jp-overlay a:hover,.jp-overlay .current-menu-item a,.jp-overlay .current_page_item a{position:relative;text-decoration:none}
.jp-overlay a::after{content:"";position:absolute;left:.4rem;right:.4rem;bottom:.16rem;height:1px;background:currentColor;opacity:0;transition:opacity 120ms ease;pointer-events:none}
.jp-overlay .current-menu-item a::after,.jp-overlay .current_page_item a::after,.jp-overlay a:focus-visible::after{opacity:1}
@media(hover:hover) and (pointer:fine){.jp-overlay a:hover::after{opacity:1}}
/* Form controls share the original compact scale. Focus belongs to the whole choice. */
.jp input[type=text],.jp input[type=email],.jp input[type=tel],.jp textarea{font-size:1rem;font-weight:400}
.jp input::placeholder,.jp textarea::placeholder{font-size:var(--fs-sm);font-weight:400;letter-spacing:normal;opacity:1;color:var(--ink-faint)}
.jp .chips input[type=radio],.jp .chips input[type=checkbox]{background:transparent;box-shadow:none;outline:none}
.jp .chips label:has(input:focus-visible){outline:2px solid var(--red);outline-offset:3px}
.jp .link,.jp .link:hover,.jp .link:active,.jp .link:focus{background:transparent}
.jp .link{transition:color 160ms ease,text-decoration-color 160ms ease}
a,button,summary,.chips label,.chips input{-webkit-tap-highlight-color:transparent}
.jp .grid2 > .field{margin-bottom:0}
.jp .grid2:has(> .field){margin-bottom:1.25rem}
/* Hold the complete content briefly, then reveal it as one surface. */
html.jp-page-preparing main.jp{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){html.jp-page-preparing main.jp{opacity:1;visibility:visible}}