/* Theme Name: RARUM Description: Įmonės svetainės tema, sukurta pagal RARUM dizainą. Šriftai ir stiliai talpinami vietoje - jokių išorinių CDN. Version: 1.0.0 Author: RARUM Text Domain: rarum */ /* ---------------------------------------------------------------- fonts * Self-hosted. The design export bundled only one weight per family and * pointed every weight at it, which would have rendered 600/700 as 400; * these are the real per-weight files, latin + latin-ext for Lithuanian. */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-400-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/manrope-400-latin.woff2) format('woff2');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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/manrope-500-latin.woff2) format('woff2');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:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/manrope-600-latin.woff2) format('woff2');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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/manrope-700-latin.woff2) format('woff2');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:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-400i-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/newsreader-400i-latin.woff2) format('woff2');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:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/newsreader-300-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/newsreader-300-latin.woff2) format('woff2');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:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/newsreader-400-latin.woff2) format('woff2');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:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-500-latin-ext.woff2) format('woff2');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;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/newsreader-500-latin.woff2) format('woff2');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;} /* ---------------------------------------------------------------- base * Taken verbatim from the design. */ body{margin:0;background:#F5F9FD;color:#0B2545;font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased} a{color:#0B2545;text-decoration:none}a:hover{color:#1F6FB2} *{box-sizing:border-box} input,textarea{font-family:inherit} @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} /* Hero fono bangavimas: du sluoksniai, tiksliai kaip dizaine */ @keyframes wave1{0%,100%{transform:translate(0,0) scaleY(1)}33%{transform:translate(-1.5%,-1.2%) scaleY(1.03)}66%{transform:translate(1.2%,.8%) scaleY(.98)}} @keyframes wave2{0%,100%{transform:translate(0,0) scaleY(1)}50%{transform:translate(2%,-1.5%) scaleY(1.05)}} @keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes pop{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* --------------------------------------------------- hover/focus states * Generated by the design runtime from its style-hover attributes. */ .scp0:hover { background: rgb(234, 242, 250) !important; } .scp1:hover { background: rgb(31, 111, 178) !important; color: rgb(255, 255, 255) !important; transform: translateY(-1px) !important; } .scp2:hover { background: rgb(31, 111, 178) !important; color: rgb(255, 255, 255) !important; transform: translateY(-2px) !important; } .scp3:hover { box-shadow: rgb(31, 111, 178) 0px 0px 0px 1.5px inset !important; color: rgb(31, 111, 178) !important; transform: translateY(-2px) !important; } .scp4:hover { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1.5px inset !important; color: rgb(255, 255, 255) !important; transform: translateY(-1px) !important; } .scp5:hover { transform: translateY(-4px) !important; box-shadow: rgba(11, 37, 69, 0.06) 0px 2px 4px, rgba(11, 37, 69, 0.28) 0px 28px 56px -24px !important; } .scp6:hover { color: rgb(31, 111, 178) !important; } .scp7:hover { background: rgb(11, 37, 69) !important; color: rgb(255, 255, 255) !important; } .scp8:hover { box-shadow: rgb(31, 111, 178) 0px 0px 0px 1.5px inset !important; color: rgb(31, 111, 178) !important; transform: translateY(-1px) !important; } .scp9:hover { background: rgb(140, 194, 240) !important; color: rgb(11, 37, 69) !important; } /* ---------------------------------------------------------------- theme * Everything below replaces behaviour the design did in JavaScript. */ /* The design writes display on the elements themselves, so every toggle here has to be !important - a class rule alone loses to an inline style. */ [hidden]{display:none !important} /* The design chose its header variant at window.innerWidth >= 1000, sized for its six nav items. Konsultacija now sits beside the CTA as a button, so the header row measures 1157px and the hamburger takes over below 1160px. Decided by CSS so it is right before scripts run. */ .rr-menu-toggle, .rr-nav-mobile{display:none !important} @media (max-width:1159px){ .rr-nav-desktop, .rr-cta-desktop{display:none !important} .rr-menu-toggle{display:inline-flex !important;align-items:center} .rr-nav-mobile[data-open="1"]{display:flex !important} } /* FAQ accordion */ .rr-acc[data-hidden="1"]{display:none !important} /* Reviews carousel: the design sized each slide as calc((100% - gap*(n-1)) / n) with n = 3 / 2 / 1 by width. The slides carry the 3-up width inline, so these need !important. */ .rr-rev-track{display:flex;gap:20px;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .rr-rev-track > *{flex:0 0 calc((100% - 40px) / 3) !important} @media (max-width:999px){ .rr-rev-track > *{flex:0 0 calc((100% - 20px) / 2) !important} } @media (max-width:639px){ .rr-rev-track > *{flex:0 0 100% !important;padding:26px !important} } /* Reveal-on-scroll: only applied by the script, so content is visible when JavaScript does not run. */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important} } /* Contact Form 7 inherits the design's field styling */ .wpcf7 form.wpcf7-form p{margin:0} .wpcf7-not-valid-tip{color:#B3261E;font-size:13px;margin-top:6px} .wpcf7 .wpcf7-response-output{margin:14px 0 0;padding:12px 16px;border-radius:14px; border:1.5px solid #DCE7F2;font-size:14px;line-height:1.5} .wpcf7-spinner{display:none} /* Form controls: the design put these inline on the elements, but Contact Form 7 renders its own markup, so they live as classes instead. */ .scpa{border: 1.5px solid rgb(220, 231, 242);border-radius: 14px;background: rgb(245, 249, 253);padding: 16px 18px;font-size: 16px;outline: none;transition: border-color 0.25s} .scpa:focus{border-color:#1F6FB2} textarea.scpa{resize:vertical} .scpe{border: 0px;background: rgb(245, 249, 253);border-radius: 14px;padding: 14px 16px;font-size: 16px;outline: none;box-shadow: rgb(220, 231, 242) 0px 0px 0px 1.5px inset;font-weight: 400} .scpe:focus{box-shadow:inset 0 0 0 1.5px #1F6FB2} .wpcf7-form-control-wrap{display:block} .rr-btn{display:inline-flex;align-items:center;gap:10px;background:#0B2545;color:#fff; padding:16px 26px;border-radius:999px;font-size:14px;font-weight:600;border:0;cursor:pointer; font-family:inherit;transition:background .25s,transform .25s} .rr-btn:hover{background:#1F6FB2;transform:translateY(-1px)} /* Legal pages: text recovered from the previous site, set in the new type scale. The design has no layout for these, so this is the plain reading column the rest of the site implies. */ .rr-legal{max-width:820px;padding:clamp(28px,4vw,44px) 0 clamp(56px,8vw,96px)} .rr-legal h2{font-family:Newsreader,serif;font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.25;color:#0B2545;margin:44px 0 14px} .rr-legal h3{font-family:Manrope,sans-serif;font-weight:700;font-size:17px;color:#0B2545;margin:26px 0 8px} .rr-legal p{font-size:15px;line-height:1.75;color:#33465C;margin:0 0 14px} .rr-legal ul,.rr-legal ol{font-size:15px;line-height:1.75;color:#33465C;margin:0 0 18px;padding-left:20px} .rr-legal li{margin:0 0 8px} .rr-legal a{color:#1F6FB2;text-decoration:underline;text-underline-offset:2px} .rr-legal strong{color:#0B2545} .rr-legal table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:14px;background:#fff} .rr-legal th,.rr-legal td{border:1px solid #DCE7F2;padding:10px 13px;text-align:left;vertical-align:top} .rr-legal th{background:#EAF2FA;color:#0B2545;font-weight:700} .rr-legal dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin:0 0 20px} .rr-legal dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#5A6B80;padding-top:12px} .rr-legal dd{margin:0 0 4px;font-size:15px;color:#0B2545} @media(max-width:640px){.rr-legal dl{grid-template-columns:1fr}} /* The design's own hover states. scpb (footer and menu links), scpc (category chips and the carousel arrows) and scpd were missing from this sheet, so those controls had no hover at all. */ .scpb:hover{color:rgb(140,194,240) !important} .scpc:hover{background:rgb(31,111,178) !important;color:rgb(255,255,255) !important} .scpd:hover{background:rgb(220,234,247) !important} /* full-width form controls */ .scpa,.scpe{width:100%} /* Bottom bar: make the right-hand item exactly one grid track wide so its LEFT edge lands on the left edge of the Kontaktai column above it. (100% - 120px)/4 is the same track width the footer grid computes - four columns, three 40px gaps - and both rows share the same container, so they stay locked together. Only above 1020px, where that grid really is four columns. */ @media (min-width:1020px){ .rr-foot-bottomright{width:calc((100% - 120px) / 4)} } /* ------------------------------------------------------------------ news */ /* Article body. The imported posts are plain semantic HTML with no inline styles, so the typography is set here rather than on every element. */ .rr-article{max-width:820px} .rr-article > *:first-child{margin-top:0} .rr-article p{margin:0 0 18px;font-size:17px;line-height:1.7;color:#33465C} .rr-article h2{margin:38px 0 14px;font-family:Newsreader,serif;font-weight:400; font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;color:#0B2545} .rr-article h3{margin:28px 0 10px;font-family:Newsreader,serif;font-weight:500; font-size:22px;line-height:1.25;color:#0B2545} .rr-article ul,.rr-article ol{margin:0 0 18px;padding-left:22px; font-size:17px;line-height:1.7;color:#33465C} .rr-article li{margin:0 0 8px} .rr-article strong{font-weight:600;color:#0B2545} .rr-article a{color:#1F6FB2;border-bottom:1px solid} .rr-article blockquote{margin:24px 0;padding:0 0 0 20px;border-left:2px solid #DCE7F2; font-family:Newsreader,serif;font-size:20px;line-height:1.45;color:#0B2545} /* Archive pagination, styled like the design's small pill controls. */ .pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding:0 14px;border-radius:999px;background:#fff; color:#0B2545;font-size:14px;font-weight:600; box-shadow:inset 0 0 0 1.5px #DCE7F2;transition:box-shadow .25s,color .25s} .pagination .page-numbers:hover{box-shadow:inset 0 0 0 1.5px #1F6FB2;color:#1F6FB2} .pagination .page-numbers.current{background:#0B2545;color:#fff;box-shadow:none} .pagination .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* The hero stat pair is justify-self:end, which is right in the two-column desktop hero but pushes it to the right edge once the grid collapses to one column at 595px and under. Inline style, so this needs !important. */ @media (max-width:595px){ .rr-hero-stats{justify-self:start !important} } /* Service-card arrow: on card hover a navy disc fills in behind it and the arrow flips to white. align-self opts the span out of the row's baseline alignment so the disc centres on the arrow. The arrow's blue is an inline style, so the hover colour needs !important to win. */ .rr-card-arrow{width:40px;height:40px;flex:0 0 auto;align-self:center; display:inline-flex;align-items:center;justify-content:center;border-radius:50%; background:transparent;transition:background .3s cubic-bezier(.2,.7,.2,1),color .3s} .scp5:hover .rr-card-arrow{background:#0B2545;color:#fff !important} /* Consultation booking: one Bookly form per duration, swapped by the tiles. Never hide the inactive one with display:none - Bookly measures its layout when it mounts, so a form mounted inside a display:none parent sizes itself to zero width and its service/staff cards render broken. Keeping it in flow but visually hidden lets it measure correctly. */ .rr-forms{position:relative} .rr-form{position:absolute;top:0;left:0;width:100%;visibility:hidden;opacity:0; pointer-events:none;transition:opacity .25s} .rr-form.is-active{position:relative;visibility:visible;opacity:1;pointer-events:auto} .rr-dur-opt:hover{box-shadow:inset 0 0 0 1.5px #1F6FB2} /* Bookly inside the Investicija card: show the calendar only. The right-hand results column holds Bookly's service card, and that card is what opens the time popup - so park the column off-screen rather than display:none, which would make it unclickable. This lives in CSS, not inline styles, because Bookly re-renders its DOM and wipes anything set on the elements directly. */ .rr-form .bookly-search-form-right{position:absolute !important;left:-9999px !important; top:0 !important;width:320px !important} .rr-form .bookly-search-form-left{max-width:none !important;width:100% !important;padding:0 !important} .rr-form .bookly-search-form-calendar{max-width:none !important;width:100% !important} /* the filter toggle opens the service/staff pickers this form deliberately hides */ .rr-form .bookly-search-form-left > div:first-child{display:none !important} /* Legal forms sit under the hero figures; keep the stack left-aligned on phones. */ @media (max-width: 595px) { .rr-hero-stats { align-items: flex-start !important; } } /* Kam dirbame (home): five direction cards. The non-profit card carries the longest text, so it takes two tracks wherever there are at least two. */ .rr-dirs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .rr-dir-wide{grid-column:span 2} @media (max-width:999px){ .rr-dirs{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:639px){ .rr-dirs{grid-template-columns:minmax(0,1fr)} .rr-dir-wide{grid-column:auto} } .rr-dir-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .rr-dir-tags li{padding:7px 13px;border-radius:999px;background:#F5F9FD;box-shadow:inset 0 0 0 1.5px #DCE7F2; font-size:13px;font-weight:600;line-height:1.3;color:#0B2545} /* Footer on phones: menu and contacts side by side, awards in a 2x2 grid, legal links in one row above the copyright (the address there repeats the contacts, so only the mark stays). The lines background is sized to the footer's height so it sits behind the content, not in a strip at the bottom. */ @media (max-width:639px){ .rr-foot{background-size:auto,auto 78% !important} .rr-foot-grid{grid-template-columns:1fr 1fr !important;grid-template-areas:"menu contact" "awards awards" "links links";gap:36px 20px !important} .rr-foot-menu{grid-area:menu} .rr-foot-contact{grid-area:contact} .rr-foot-awards{grid-area:awards;display:grid !important;grid-template-columns:1fr 1fr;gap:18px 12px !important;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)} .rr-foot-awards > div > div{white-space:normal !important} .rr-foot-links{grid-area:links;flex-direction:row !important;flex-wrap:wrap;gap:8px 22px !important;font-size:13px} .rr-foot-links > span{display:none} .rr-foot-bottomright{font-size:0} } /* Tablets get three link columns from the design's auto-fit grid, which left the awards alone in the first cell of a second row; run them across it. */ @media (min-width:640px) and (max-width:1019px){ .rr-foot-awards{grid-column:1 / -1;display:grid !important;grid-template-columns:repeat(4,1fr);gap:16px !important;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)} .rr-foot-awards > div > div{white-space:normal !important} }