/* ===========================================================
* WINDOWS LEGACY SIZING OVERRIDE
* ===========================================================
* Restores the exact site sizing that was live on Windows
* immediately before the sitewide fluid-responsive rewrite.
* Scoped entirely under html.is-windows (added by the inline
* detection script in header.php) so every other device keeps
* the current fluid clamp()-based system completely unchanged.
*
* This file must be enqueued AFTER style.css, hero.css,
* claymorphism-theme.css, materials-section.css,
* who-we-are-section.css, capabilities-section.css, and
* site-glass-nav.css (see functions.php). Every selector here
* is also prefixed with html.is-windows, which is higher
* specificity than the plain selectors those files use, so
* these rules win on Windows regardless of load order too --
* the enqueue order is just an extra, deliberate safety net.
*
* No (min-resolution), devicePixelRatio, or any other display-
* density approximation is used anywhere in this file -- only
* the html.is-windows class, set by JavaScript. See the
* "WINDOWS DETECTION" comment block in header.php for exactly
* how that class is applied.
* =========================================================== */
/* ---- Sitewide content container + core typography (was in
css/style.css) ------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows .container {
width: min(calc(100% - 96px), 1320px);
max-width: 100%;
margin-inline: auto;
}
html.is-windows h1 { font-size: 80px; }
html.is-windows h2 { font-size: 38px; }
html.is-windows h3 { font-size: 30px; }
html.is-windows h4 { font-size: 23px; }
html.is-windows body p { font-size: 16px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows .container {
width: min(calc(100% - 96px), 1080px);
max-width: 100%;
margin-inline: auto;
}
html.is-windows h1 { font-size: 62px; }
html.is-windows h2 { font-size: 32px; }
html.is-windows h3 { font-size: 27px; }
html.is-windows h4 { font-size: 20px; }
html.is-windows body p { font-size: 14px; }
}
/* ---- Header dual logo (was in css/style.css) -------------- */
@media (min-width: 1101px) {
html.is-windows #header .wrapper .header-menu .logo.logo--dual {
gap: 20px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__ibox {
width: 221px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
width: 284px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__divider {
height: 50px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
width: 166px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
width: 234px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
height: 41px;
}
}
@media (min-width: 1280px) and (max-width: 1699px) {
html.is-windows #header .wrapper .header-menu .logo.logo--dual {
gap: 18px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__ibox {
width: 195px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__opticlean {
width: 250px;
}
html.is-windows #header .wrapper .header-menu .logo.logo--dual .logo__divider {
height: 44px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__ibox {
width: 154px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__opticlean {
width: 217px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo.logo--dual .logo__divider {
height: 38px;
}
}
/* ---- Homepage hero text (was in css/hero.css) -------------- */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows .ibox-hero__eyebrow { font-size: 18px; }
html.is-windows .ibox-hero__heading { font-size: 72px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows .ibox-hero__eyebrow { font-size: 14px; }
html.is-windows .ibox-hero__heading { font-size: 56px; }
}
/* ---- Floating Contact Us / WhatsApp buttons, homepage only
(was in css/claymorphism-theme.css) ------------------------ */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows body.home .btn-main.sticky-contact-btn { padding: 18px 36px; }
html.is-windows body.home .btn-main.sticky-contact-btn svg { width: 18px; height: 14px; }
html.is-windows body.home .whatsapp-sticky-button { width: 50px; height: 50px; }
html.is-windows body.home .whatsapp-sticky-button svg { width: 24px; height: 24px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows body.home .btn-main.sticky-contact-btn { padding: 14px 28px; }
html.is-windows body.home .sticky-contact-btn__text { font-size: 12px; }
html.is-windows body.home .btn-main.sticky-contact-btn svg { width: 15px; height: 12px; }
html.is-windows body.home .whatsapp-sticky-button { width: 40px; height: 40px; }
html.is-windows body.home .whatsapp-sticky-button svg { width: 19px; height: 19px; }
}
/* ---- Homepage "Materials" section (was in
css/materials-section.css) ---------------------------------- */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows .section-label { font-size: .7rem; }
html.is-windows .materials-header h2 { font-size: 3.5rem; }
html.is-windows .materials-header p { font-size: .91rem; }
html.is-windows .material-item { max-width: 384px; }
html.is-windows .material-icon { width: 100px; height: 100px; }
html.is-windows .material-item h3 { font-size: 1.47rem; }
html.is-windows .material-item p { font-size: 1.14rem; }
html.is-windows .divider { width: 41px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows .section-label { font-size: .6rem; }
html.is-windows .materials-header h2 { font-size: 3rem; }
html.is-windows .materials-header p { font-size: .78rem; }
html.is-windows .material-item { max-width: 330px; }
html.is-windows .material-icon { width: 85px; height: 85px; }
html.is-windows .material-item h3 { font-size: 1.25rem; }
html.is-windows .material-item p { font-size: .97rem; }
html.is-windows .divider { width: 35px; }
}
/* ---- Homepage "Who We Are" section (was in
css/who-we-are-section.css) ---------------------------------- */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows .ibox-story__heading { font-size: 44px; }
html.is-windows .ibox-story__copy { font-size: 18px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows .ibox-story__heading { font-size: 40px; }
html.is-windows .ibox-story__copy { font-size: 16px; }
}
/* ---- Homepage "Our Products / Capabilities" section (was in
css/capabilities-section.css) --------------------------------- */
@media (min-width: 1440px) and (max-width: 1599px) {
html.is-windows .ibox-categories__eyebrow { font-size: 14px; }
html.is-windows .ibox-categories__heading { font-size: 44px; }
html.is-windows .ibox-categories__card { min-height: 300px; }
html.is-windows .ibox-categories__media { flex-basis: 38%; }
html.is-windows .ibox-categories__title { font-size: 26px; }
html.is-windows .ibox-categories__subtitle { font-size: 17px; }
}
@media (min-width: 1101px) and (max-width: 1439px), (min-width: 1600px) {
html.is-windows .ibox-categories__eyebrow { font-size: 12px; }
html.is-windows .ibox-categories__heading { font-size: 40px; }
html.is-windows .ibox-categories__card { min-height: 265px; }
html.is-windows .ibox-categories__media { flex-basis: 34%; }
html.is-windows .ibox-categories__title { font-size: 22px; }
html.is-windows .ibox-categories__subtitle { font-size: 15px; }
}
/* ---- Floating nav logo, "true desktop" jump point (was in
css/site-glass-nav.css) ----------------------------------------- */
@media (min-width: 1367px) {
html.is-windows .site-glass-nav__logo img {
height: 48px !important;
}
}
/* ---- Sitewide section spacing / card / image / content-width
ladder (was four separate breakpoint blocks in css/style.css,
consolidated here in the same four ranges + the >=1900px base
tier they used to fall back to) ------------------------------- */
@media (min-width: 1121px) and (max-width: 1279px) {
html.is-windows .approach-section .content-wrap {
max-width: 550px;
margin-bottom: 50px;
}
html.is-windows .sector-section .content-wrap {
max-width: 550px;
margin-bottom: 50px;
}
html.is-windows .catalogue-section .row-wrapper .right-col p {
font-size: 15px;
}
html.is-windows .catalogue-section .row-wrapper .right-col {
grid-template-columns: 600px auto;
}
html.is-windows .catalogue-section .row-wrapper .right-col h2 {
margin-bottom: 20px;
}
html.is-windows .title {
margin-bottom: 20px;
}
html.is-windows footer .footer-contact-btn.btn-main {
display: none;
right: 0;
}
html.is-windows .footer-bottom .footer-contact-btn.btn-main {
display: block;
}
html.is-windows .our-dna-section {
padding: 70px 0px;
}
html.is-windows .about-us-section {
padding: 70px 0px;
}
html.is-windows .sector-section {
padding: 70px 0px;
}
html.is-windows .approach-section {
padding: 70px 0px;
}
html.is-windows .footer-bottom p {
text-align: left;
}
html.is-windows footer {
padding-top: 80px;
}
html.is-windows .footer-top {
padding-bottom: 65px;
grid-template-columns: auto 1fr 1fr;
gap: 36px;
}
html.is-windows .footer-logo-link--ibox {
width: 160px;
}
html.is-windows .footer-logo-link--opticlean {
width: 282px;
}
html.is-windows .footer-logo-divider {
width: 80px;
}
html.is-windows ul.approach-box-list li.approach-box .approach-box-content h6 {
font-size: 15px;
}
html.is-windows ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
font-size: 13px;
white-space: normal;
}
html.is-windows ul.sector-box-list li.sector-box .sector-image {
height: 270px;
}
html.is-windows ul.sector-icon-box-list li.sector-icon-box .icon {
width: 55px;
height: 40px;
}
html.is-windows ul.approach-box-list li.approach-box .approach-image {
height: 240px;
}
html.is-windows .catalogue-section .row-wrapper {
gap: 45px;
}
html.is-windows #header .wrapper .header-menu {
grid-template-columns: 1fr auto 1fr;
}
html.is-windows .instagram-gallery-section {
padding-top: 45px;
padding-left: 10px;
padding-right: 10px;
}
html.is-windows .cases-section {
padding: 60px 0px;
}
html.is-windows .cases-section .content-wrap {
margin-bottom: 60px;
max-width: 780px;
}
html.is-windows ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
height: 230px;
}
html.is-windows .cases-section:before {
height: 180px;
}
html.is-windows ul.case-collection-list-gallery li.case-collection-data {
margin: 0 10px;
}
html.is-windows .contact-us-section {
padding: 60px 0px;
}
html.is-windows .contact-form .gform_wrapper .gfield textarea {
height: 130px !important;
}
html.is-windows .contact-form .gform_wrapper.gravity-theme .gfield_label {
font-size: 15px;
}
html.is-windows .contact-form .gform_wrapper .gfield input,
html.is-windows .contact-form .gform_wrapper .gfield textarea,
html.is-windows .gform_wrapper .gfield select {
height: 45px;
line-height: 45px;
font-size: 14px !important;
}
html.is-windows .contact-form .gform_wrapper.gravity-theme .gform_fields {
grid-gap: 20px 25px !important;
}
html.is-windows .contact-us-section .row-wrapper {
gap: 100px;
}
html.is-windows .contact-form .gform_wrapper .gform_footer .gform_button {
padding: 14px 25px;
}
html.is-windows .prosesses-section {
padding: 55px 0px;
}
html.is-windows .prosesses-section .processes-image {
height: 300px;
}
html.is-windows .prosesses-section .processes-content h3.small-number-title {
font-size: 25px;
}
html.is-windows .privacy-policy-section .privacy-policy-content ul li {
font-size: 16px;
}
html.is-windows .privacy-policy-section .privacy-policy-content h2 {
font-size: 30px;
}
html.is-windows body.page-template-privacy-policy {
padding-top: 0;
}
html.is-windows .page-not-found {
padding: 55px 0px;
}
html.is-windows .page-not-found h1 {
font-size: 50px;
}
html.is-windows .page-not-found h2 {
font-size: 25px;
}
html.is-windows .page-not-found .btn-wrap {
margin-top: 30px;
}
html.is-windows .btn-main.sticky-contact-btn {
right: 15px;
bottom: 60px;
}
html.is-windows .dowonload-catalog-form {
padding: 50px;
max-height: 530px;
max-width: 900px;
}
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper > div {
margin-bottom: 60px;
}
html.is-windows .whatsapp-sticky-button {
bottom: 125px;
}
}
@media (min-width: 1280px) and (max-width: 1499px) {
html.is-windows .approach-section .content-wrap {
max-width: 550px;
margin-bottom: 40px;
}
html.is-windows .sector-section .content-wrap {
max-width: 550px;
margin-bottom: 40px;
}
html.is-windows .catalogue-section .row-wrapper .right-col p {
font-size: 15px;
}
html.is-windows .catalogue-section .row-wrapper .right-col {
grid-template-columns: 600px auto;
}
html.is-windows .catalogue-section .row-wrapper .right-col h2 {
margin-bottom: 20px;
}
html.is-windows .title {
margin-bottom: 10px;
}
html.is-windows footer .footer-contact-btn.btn-main {
display: none;
right: 0;
}
html.is-windows .footer-bottom .footer-contact-btn.btn-main {
display: block;
}
html.is-windows .our-dna-section {
padding: 60px 0px;
}
html.is-windows .about-us-section {
padding: 60px 0px;
}
html.is-windows .sector-section {
padding: 60px 0px;
}
html.is-windows .approach-section {
padding: 60px 0px;
}
html.is-windows .footer-bottom p {
text-align: left;
}
html.is-windows footer {
padding-top: 80px;
}
html.is-windows .footer-top {
padding-bottom: 65px;
grid-template-columns: auto 1fr 1fr;
gap: 36px;
}
html.is-windows .footer-logo-link--ibox {
width: 160px;
}
html.is-windows .footer-logo-link--opticlean {
width: 282px;
}
html.is-windows .footer-logo-divider {
width: 80px;
}
html.is-windows ul.approach-box-list li.approach-box .approach-box-content h6 {
font-size: 15px;
}
html.is-windows ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
font-size: 13px;
white-space: normal;
}
html.is-windows ul.sector-box-list li.sector-box .sector-image {
height: 270px;
}
html.is-windows ul.sector-icon-box-list li.sector-icon-box .icon {
width: 55px;
height: 40px;
}
html.is-windows ul.approach-box-list li.approach-box .approach-image {
height: 270px;
}
html.is-windows #header .wrapper .header-menu {
grid-template-columns: 1fr auto 1fr;
}
html.is-windows #header .wrapper .header-menu .logo a {
width: 150px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo a {
width: 130px;
}
html.is-windows .sector-section ul.sector-box-list {
margin-bottom: 70px;
}
html.is-windows span.scroll_section_cut {
margin-top: 0;
height: 0;
}
html.is-windows .instagram-gallery-section {
padding-top: 55px;
padding-left: 10px;
padding-right: 10px;
}
html.is-windows .our-dna-section .content-wrap {
max-width: 750px;
}
html.is-windows .about-us-section .content-wrap {
max-width: 750px;
}
html.is-windows .cases-section {
padding: 60px 0px;
}
html.is-windows .cases-section .content-wrap {
margin-bottom: 60px;
}
html.is-windows ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
height: 230px;
}
html.is-windows .cases-section:before {
height: 180px;
}
html.is-windows .contact-us-section {
padding: 60px 0px;
}
html.is-windows .contact-form .gform_wrapper .gfield textarea {
height: 130px !important;
}
html.is-windows .contact-form .gform_wrapper.gravity-theme .gfield_label {
font-size: 16px;
}
html.is-windows .prosesses-section {
padding: 60px 0px;
}
html.is-windows .prosesses-section .processes-image {
height: 350px;
}
html.is-windows .privacy-policy-section .privacy-policy-content {
max-width: 600px;
}
html.is-windows .privacy-policy-section .privacy-policy-content ul li {
font-size: 16px;
}
html.is-windows .privacy-policy-section .privacy-policy-content h5 {
margin-bottom: 10px;
}
html.is-windows .privacy-policy-section .privacy-policy-content p {
font-size: 16px;
}
html.is-windows .privacy-policy-section .privacy-policy-content h2 {
font-size: 30px;
}
html.is-windows .privacy-policy-section {
padding-bottom: 55px;
}
html.is-windows .page-not-found {
padding: 55px 0px;
}
html.is-windows .page-not-found h1 {
font-size: 50px;
}
html.is-windows .page-not-found h2 {
font-size: 25px;
}
html.is-windows .page-not-found .btn-wrap {
margin-top: 30px;
}
html.is-windows body.error404 {
margin-top: 94px;
}
html.is-windows .btn-main.sticky-contact-btn {
right: 15px;
bottom: 60px;
}
html.is-windows .dowonload-catalog-form {
padding: 50px;
max-height: 580px;
}
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper .left-col,
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper .right-col {
width: 47%;
}
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper > div {
margin-bottom: 60px;
}
html.is-windows .whatsapp-sticky-button {
bottom: 125px;
}
}
@media (min-width: 1500px) and (max-width: 1699px) {
html.is-windows .approach-section .content-wrap {
max-width: 600px;
margin-bottom: 50px;
}
html.is-windows .sector-section .content-wrap {
max-width: 600px;
margin-bottom: 50px;
}
html.is-windows .sector-section ul.sector-box-list {
margin-bottom: 70px;
}
html.is-windows .catalogue-section .row-wrapper .right-col p {
font-size: 15px;
}
html.is-windows .catalogue-section .row-wrapper .right-col {
grid-template-columns: 600px auto;
}
html.is-windows .catalogue-section .row-wrapper .right-col h2 {
margin-bottom: 20px;
}
html.is-windows .title {
margin-bottom: 15px;
}
html.is-windows footer .footer-contact-btn.btn-main {
display: none;
right: 0;
}
html.is-windows .footer-bottom .footer-contact-btn.btn-main {
display: block;
}
html.is-windows .our-dna-section {
padding: 70px 0px;
}
html.is-windows .about-us-section {
padding: 70px 0px;
}
html.is-windows .sector-section {
padding: 70px 0px;
}
html.is-windows .approach-section {
padding: 70px 0px;
}
html.is-windows .footer-bottom p {
text-align: left;
}
html.is-windows footer {
padding-top: 90px;
}
html.is-windows .footer-top {
padding-bottom: 65px;
}
html.is-windows ul.approach-box-list li.approach-box .approach-box-content h6 {
font-size: 16px;
}
html.is-windows ul.approach-box-list.branding-box-list li.approach-box .approach-box-content h6 {
font-size: 14px;
white-space: normal;
}
html.is-windows #header .wrapper .header-menu {
grid-template-columns: 1fr auto 1fr;
}
html.is-windows #header .wrapper .header-menu .logo a {
width: 150px;
}
html.is-windows #header.fixed .wrapper .header-menu .logo a {
width: 130px;
}
html.is-windows span.scroll_section_cut {
margin-top: 0;
height: 0;
}
html.is-windows .instagram-gallery-section {
padding-top: 55px;
}
html.is-windows .our-dna-section .content-wrap {
max-width: 700px;
}
html.is-windows .about-us-section .content-wrap {
max-width: 700px;
}
html.is-windows .cases-section {
padding: 70px 0px;
}
html.is-windows .cases-section .content-wrap {
margin-bottom: 70px;
}
html.is-windows ul.case-collection-list-gallery li.case-collection-data .case-collection-img {
height: 270px;
}
html.is-windows .contact-us-section {
padding: 60px 0px;
}
html.is-windows .contact-form .gform_wrapper .gfield textarea {
height: 140px !important;
}
html.is-windows .contact-form .gform_wrapper.gravity-theme .gfield_label {
font-size: 16px;
}
html.is-windows .prosesses-section {
padding: 70px 0px;
}
html.is-windows .prosesses-section .processes-image {
height: 350px;
}
html.is-windows body.page-template-privacy-policy {
padding-top: 0;
}
html.is-windows .privacy-policy-section {
padding-bottom: 55px;
}
html.is-windows .privacy-policy-section .privacy-policy-content p {
font-size: 18px !important;
}
html.is-windows .privacy-policy-section .privacy-policy-content {
max-width: 700px;
}
html.is-windows .privacy-policy-section .privacy-policy-content ul li {
font-size: 18px;
}
html.is-windows .privacy-policy-section .privacy-policy-content h5 {
margin-bottom: 10px;
}
html.is-windows .page-not-found {
padding: 55px 0px;
}
html.is-windows .page-not-found h1 {
font-size: 50px;
}
html.is-windows .page-not-found h2 {
font-size: 25px;
}
html.is-windows .page-not-found .btn-wrap {
margin-top: 30px;
}
html.is-windows body.error404 {
margin-top: 94px;
}
html.is-windows .btn-main.sticky-contact-btn {
right: 15px;
bottom: 60px;
}
html.is-windows .dowonload-catalog-form {
padding: 50px;
max-height: 580px;
}
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper .left-col,
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper .right-col {
width: 47%;
}
html.is-windows .prosesses-section .prosess-wrapper .row-wrapper > div {
margin-bottom: 70px;
}
html.is-windows .whatsapp-sticky-button {
bottom: 125px;
}
}
@media (min-width: 1700px) and (max-width: 1899px) {
html.is-windows .approach-section .content-wrap {
max-width: 600px;
margin-bottom: 60px;
}
html.is-windows .sector-section .content-wrap {
max-width: 600px;
margin-bottom: 60px;
}
html.is-windows .catalogue-section .row-wrapper .right-col p {
font-size: 15px;
}
html.is-windows .catalogue-section .row-wrapper .right-col {
grid-template-columns: 600px auto;
}
html.is-windows .catalogue-section .row-wrapper .right-col h2 {
margin-bottom: 20px;
}
html.is-windows .title {
margin-bottom: 20px;
}
html.is-windows footer .footer-contact-btn.btn-main {
display: none;
right: 0;
}
html.is-windows .footer-bottom .footer-contact-btn.btn-main {
display: block;
}
html.is-windows .sector-section {
padding: 75px 0px;
}
html.is-windows .approach-section {
padding: 75px 0px;
}
html.is-windows .our-dna-section {
padding: 75px 0px;
}
html.is-windows .about-us-section {
padding: 75px 0px;
}
html.is-windows .footer-bottom p {
text-align: left;
}
html.is-windows .instagram-gallery-section {
padding-top: 60px;
}
html.is-windows .cases-section {
padding: 75px 0px;
}
html.is-windows .cases-section .content-wrap {
margin-bottom: 90px;
}
html.is-windows .contact-us-section {
padding: 60px 0px;
}
html.is-windows .prosesses-section {
padding: 80px 0px;
}
html.is-windows .page-not-found {
padding: 60px 0px;
}
html.is-windows .btn-main.sticky-contact-btn {
right: 15px;
bottom: 60px;
}
html.is-windows .whatsapp-sticky-button {
bottom: 125px;
}
html.is-windows .dowonload-catalog-form {
max-height: 595px;
}
}
@media (min-width: 1900px) {
html.is-windows .sector-section {
padding: 80px 0px;
}
html.is-windows .approach-section {
padding: 80px 0px;
}
html.is-windows .our-dna-section {
padding: 80px 0px;
}
html.is-windows .about-us-section {
padding: 80px 0px;
}
html.is-windows .cases-section {
padding: 80px 0px 100px 0px;
}
html.is-windows .prosesses-section {
padding: 90px 0px;
}
html.is-windows .page-not-found {
padding: 70px 0px;
}
html.is-windows .contact-us-section {
padding: 60px 0px;
}
html.is-windows .instagram-gallery-section {
padding-top: 80px;
}
html.is-windows footer {
padding-top: 100px;
}
html.is-windows .footer-top {
padding-bottom: 65px;
gap: 56px;
grid-template-columns: auto 1fr 1fr;
}
html.is-windows .title {
margin-bottom: 26px;
}
html.is-windows .dowonload-catalog-form {
max-width: 1000px;
max-height: 600px;
padding: 50px 50px 60px 50px;
}
}
/* ---- Two page-specific heading overrides, Windows only --------------
* These two headings use their own page-specific classes
* (.ibox-about-intro__heading in css/about-page.css,
* .ibox-blog-hero__heading in css/blog-page.css), each with a higher
* specificity (two classes) than the sitewide `html.is-windows h1`
* rules above (one class + one element = lower specificity), so they
* already win over those rules by CSS specificity alone -- no
* !important needed, no change to the sitewide h1 rules above.
* Scoped to the same >=1121px desktop range those two pages' own
* tablet/mobile reductions already start below (max-width: 1120px in
* each file), so narrower Windows browser windows still shrink
* exactly as they did before -- only the desktop value changes.
* Position, alignment, spacing, section height, and every other
* heading on both pages are untouched.
*/
@media (min-width: 1121px) {
html.is-windows .ibox-about-intro__heading {
font-size: 40px;
}
html.is-windows .ibox-blog-hero__heading {
font-size: 40px;
}
/* Why iBOX hero heading ("Make Your Brand the Key to Attraction") --
same specificity reasoning as the two headings above:
.why-hero-brand__heading (css/why-ibox-page.css) has only one
class (0,1,0), so on Windows it was being silently overridden by
this file's own earlier html.is-windows h1 rule (0,1,1 -- higher
specificity), meaning it was actually rendering at that rule's
80px/62px rather than its own clamp(28px, 4.2vw, 49px). This
class + html.is-windows combination (0,2,0) reliably outranks
that, restoring control to this page's own sizing on Windows --
and, per follow-up feedback ("slightly smaller and more
proportionate... subtle... not dramatically smaller"), sets it
modestly below the page's own ~49px desktop ceiling. Line breaks,
the "Key to Attraction" accent/underline, alignment, logos,
tagline, spacing, and the entrance animation are all untouched --
only this font-size, and only on Windows. Non-Windows visitors
keep the exact same clamp(28px, 4.2vw, 49px) as before, at every
width. */
html.is-windows .why-hero-brand__heading {
font-size: 44px;
}
/* Why iBOX hero tagline -- same reasoning as the two headings
above: .why-hero-brand__tagline (css/why-ibox-page.css) has a
desktop clamp() ceiling of 30px; this class combined with
html.is-windows (two classes) already outranks that plain-class
rule by specificity, no !important needed. Wording, color,
position, width, logo, and divider are all untouched --
letter-spacing is defined in em in the base rule, so it scales
with this size automatically, preserving the same relative
appearance rather than needing a separate override. Scoped to
the same >=1121px desktop range the page's own mobile/tablet
reduction (max-width: 1120px) already starts below, so narrower
Windows windows still shrink exactly as before.
font-size: 28px (was 32px, before that 35px/40px) -- per follow-up
feedback ("change from its current size to exactly 28px"). Only
this one value changed. */
html.is-windows .why-hero-brand__tagline {
font-size: 28px;
}
}
/* ===========================================================
* WINDOWS-ONLY DESCRIPTION/BODY TEXT NORMALIZATION -- 16px
* ===========================================================
* Sets every listed section's description/body paragraph to exactly
* 16px on Windows, sitewide (was 18px, per follow-up feedback --
* "change all of those same description/body-text rules from 18px to
* exactly 16px"; only the value changed, same selectors, same
* reasoning). Scoped to the same >=1121px desktop range as every
* other override in this file, so narrower Windows browser windows
* still use the page's own existing mobile/tablet sizing untouched.
*
* WHY THIS IS NEEDED, not just decorative duplication: almost every
* one of these description paragraphs is a , which is only ONE class (specificity 0,1,0).
* This file's own earlier html.is-windows h1 / body p rules (further
* up this file) use a class + an element (0,1,2 specificity), which
* is actually HIGHER specificity than a single page-specific class --
* so on Windows, those broad rules were silently overriding these
* pages' own already-correct description styling, the same root
* cause already found and fixed for the About Us/Blog/Why iBOX
* headings earlier in this project. Each selector below uses its own
* page-specific class combined with html.is-windows (two classes,
* 0,2,0), which reliably outranks both the sitewide body p rule and
* every one of these pages' own internal responsive breakpoints for
* this class, so one rule per selector is enough regardless of how
* many tiers that page's own CSS defines for it -- no !important
* needed anywhere in this block.
*
* Headings, labels/eyebrows, buttons, images, cards, icons, spacing,
* and section heights are completely untouched -- only the font-size
* of each selector listed below.
*/
@media (min-width: 1121px) {
/* ---- 1. Homepage -- "Our Products" section-level description
(css/capabilities-section.css). Card-level .ibox-categories__subtitle
is deliberately NOT included -- that's a card, not this section's
own description, and is explicitly protected. */
html.is-windows .ibox-categories__copy {
font-size: 16px;
}
/* ---- 2. About Us (css/about-page.css): Crafting Trust..., Our
Story, Our Philosophy, Leadership. */
html.is-windows .ibox-about-intro__description,
html.is-windows .ibox-about-story__paragraph,
html.is-windows .ibox-about-philosophy__body,
html.is-windows .ibox-about-team__description {
font-size: 16px;
}
/* ---- 3. Shared CTA ("Would you like to discover...",
css/certifications-connect-section.css, template-parts/
lets-connect-section.php) -- one shared component, rendered on
About Us, Blog, Services, Sustainability, and Why iBOX alike, so
this single rule covers every occurrence including Blog. */
html.is-windows .ibox-cert-connect__text {
font-size: 16px;
}
/* ---- 4. Why iBOX (css/why-ibox-page.css): ROOT CAUSE FOUND AND
CORRECTED per follow-up feedback -- "WHY OPTICAL BUSINESSES CHOOSE
iBOX" was being misidentified across several previous passes as
the numbered-matrix section's heading (.ibox-why-reasons, whose
default Customizer text is actually the unrelated "Why choose
iBOX"). The real element, confirmed directly against
inc/why-ibox-page.php's own data keys (ibox_why_opening_heading /
ibox_why_opening_description) and template-why-ibox.php's markup,
is a separate section rendered directly in that template, right
after the hero: .ibox-why-statement__heading /
.ibox-why-statement__description. That's why every previous
attempt to resize "this section's description" via
.ibox-why-reasons__reason-description never visibly changed the
right element -- see that selector's own restored rule below,
back in this shared group at its original, always-correct 16px
(it was incorrectly split out into its own 18px rule in an
earlier pass, based on that same wrong identification; reverted
here). The actual fix for "WHY OPTICAL BUSINESSES CHOOSE iBOX" is
the new .ibox-why-statement__description rule further below.
This group covers: Why Optical Businesses Choose iBOX
(.ibox-why-reasons__reason-description, the numbered-matrix
section -- despite the name, NOT the section with this heading
text; kept here at 16px, unchanged from before this correction),
the process-timeline section ("From idea to finished solution",
.ibox-why-process__stage-description per stage), A Complete
Eyewear Packaging Partner (.ibox-why-strength__description),
Quality That Supports Every Delivery / Consistency / Packaging &
Transportation (all three share .ibox-why-quality__description),
The Direct Manufacturing Advantage (intro + each grid item's own
description), Clear Communication and Practical Support
(.ibox-why-support__description). */
html.is-windows .ibox-why-strength__description,
html.is-windows .ibox-why-reasons__reason-description,
html.is-windows .ibox-why-process__stage-description,
html.is-windows .ibox-why-quality__description,
html.is-windows .ibox-why-manufacturing__description,
html.is-windows .ibox-why-manufacturing__item-description,
html.is-windows .ibox-why-support__description {
font-size: 16px;
}
/* "WHY OPTICAL BUSINESSES CHOOSE iBOX" -- the ACTUAL element, per
the correction above: .ibox-why-statement__description
(template-why-ibox.php's own directly-rendered "opening" section,
css/why-ibox-page.css). Its own base rule is already 18px --
this page's approved value -- but this file's earlier, broader
html.is-windows body p rule (higher specificity than a single
page-specific class: 0,1,2 vs 0,1,0) was silently overriding it
down to that rule's own value on Windows, exactly the same root
cause already found and fixed for several headings and
descriptions elsewhere in this project. This rule restores the
page's own correct 18px specifically on Windows. Heading,
spacing, section height, alignment, colour, and icons are all
untouched -- only this one selector's font-size. */
html.is-windows .ibox-why-statement__description {
font-size: 18px;
}
/* ---- 5. Commitment / Sustainability (css/sustainability-page.css):
Progress Begins with the Choices We Make Today (.opening), Better
Design Can Mean Less Waste (.efficiency), Clear Information,
Responsible Communication (.transparency), A Continuing Journey,
Not a Finished Claim (.commitment). */
html.is-windows .ibox-sus-opening__description,
html.is-windows .ibox-sus-efficiency__description,
html.is-windows .ibox-sus-transparency__description,
html.is-windows .ibox-sus-commitment__description {
font-size: 16px;
}
/* ---- 6. Services (css/services-page.css): A Clear Process, Built
Around Your Brand (.intro), and the four process stages (Study of
Brief, Design & Material Direction, Sampling and Prototyping,
Pre-Production & Delivery Support) all share one
.ibox-services-process__description class. */
html.is-windows .ibox-services-intro__description,
html.is-windows .ibox-services-process__description {
font-size: 16px;
}
/* ---- 7. Eyewear Cases (css/eyewear-cases-page.css): iBOX Eyewear
Cases (.intro), Packaging That Communicates Brand + Flexible
Production (both share .ibox-eyewear-brand__description -- one
primary + one secondary group in that section), Premium Packaging
Designed to Strengthen Your Brand (.statement), Plastic/Metal/
Zipper/Handmade Cases (all four share .ibox-eyewear-section__description,
one looped section template), Contact Lens Cases (.cl_soon). */
html.is-windows .ibox-eyewear-intro__description,
html.is-windows .ibox-eyewear-brand__description,
html.is-windows .ibox-eyewear-statement__description,
html.is-windows .ibox-eyewear-section__description,
html.is-windows .ibox-eyewear-cl-soon__description {
font-size: 16px;
}
/* ---- 8. OPTiCLEAN Microfiber Cloths (css/microfiber-cloths-page.css):
Care That Respects the Lens (.intro), Pure Microfiber Construction
(.construction), Designed for Ophthalmic Lenses (.lenses),
Customization & Presentation (.customisation). This page's own
performance-grid entries and its own page-specific CTA are NOT in
this list and are left untouched. */
html.is-windows .ibox-mc-intro__description,
html.is-windows .ibox-mc-construction__description,
html.is-windows .ibox-mc-lenses__description,
html.is-windows .ibox-mc-customisation__description {
font-size: 16px;
}
/* ---- 9. "Speak With Our Experts" -- NOT actually one single shared
component in this codebase (confirmed by direct inspection): the
Eyewear Cases and Accessories pages each render their own separate
template part with its own class name and its own CSS file
(template-parts/eyewear-expert-cta.php + css/eyewear-expert-cta.css;
template-parts/accessories-expert-cta.php + css/accessories-expert-cta.css).
Both are listed here explicitly so every real occurrence is
covered; the Microfiber Cloths page has no equivalent section. */
html.is-windows .ibox-eyewear-expert-cta__description,
html.is-windows .ibox-expert-cta__description {
font-size: 16px;
}
/* ---- 10. Accessories (css/coming-soon-accessories.css): "A New
Collection of Eyewear Essentials Taking Shape". */
html.is-windows .ibox-soon-acc__description {
font-size: 16px;
}
/* ---- 11. Blog (css/blog-page.css): the "Perspectives on
Packaging..." intro description, the Latest Article excerpt, and
regular Blog-card excerpts. All three are rendered from this one
shared template (template-blog.php) via get_the_excerpt(), not
per-post markup, so this automatically covers current AND future
posts with no per-article changes needed. The shared CTA rule
above (#3) already covers this page's own CTA occurrence. */
html.is-windows .ibox-blog-hero__description,
html.is-windows .ibox-blog-featured__excerpt,
html.is-windows .ibox-blog-card__excerpt {
font-size: 16px;
}
/* ---- 12. Individual Blog article pages (single.php,
css/blog-page.css): only
paragraphs inside the article body
-- deliberately NOT the .ibox-blog-article__body container itself,
so headings/subheadings, lists, and links inside the article
(which either set their own font-size already, e.g. h2/h3, or
would otherwise inherit from the container) are genuinely
unaffected, exactly per requirement. This targets the shared
article template class, so it applies to every current and every
future published article automatically. */
html.is-windows .ibox-blog-article__body p {
font-size: 16px;
}
}
/* ===========================================================
* WINDOWS-ONLY INDIVIDUAL BLOG ARTICLE TITLE -- 40px
* ===========================================================
* .ibox-blog-article__title (single.php, css/blog-page.css) is the
* main title of every individual Blog article -- rendered from the
* single shared article template, so this rule automatically applies
* to every current article and every future one too, with no
* per-article changes needed. Its base rule is 42px; this class
* combined with html.is-windows (two classes) already outranks that
* plain-class rule by specificity, no !important needed.
*
* Deliberately NOT .ibox-blog-hero__heading (the Blog LANDING page's
* own heading, "Perspectives on Packaging...", already handled by its
* own separate rule further up this file) and NOT .ibox-blog-card__title
* (the small title on each card in the Blog grid) -- both explicitly
* protected, genuinely different elements/classes from this one.
* Category, date, featured image, article body spacing, and every
* subheading inside the article body are untouched -- only this one
* title's font-size. Scoped to the same >=1121px desktop range as
* every other override in this file, so a narrower Windows browser
* window still uses this page's own existing mobile/tablet sizing
* (see the max-width: 1120px / max-width: 640px tiers further down
* css/blog-page.css, both untouched).
*/
@media (min-width: 1121px) {
html.is-windows .ibox-blog-article__title {
font-size: 40px;
}
}
/* ===========================================================
* WINDOWS-ONLY "LATEST iBOX CATALOGUE" DESCRIPTION -- unchanged
* ===========================================================
* css/style.css's .catalogue-section .row-wrapper .right-col p rule
* was changed from a flat (permanently unreachable) 18px to a fluid
* clamp(15px, ..., 18px) on non-Windows devices, per follow-up
* feedback -- see that rule's own comment in css/style.css for the
* full explanation. Windows is explicitly excluded from that change
* ("leave Windows UI completely untouched... the current Windows
* result is already correct"), so this restores the exact flat 15px
* every viewport already showed there. Four classes + one element
* beats that shared rule's three classes + one element regardless of
* viewport width, so no media query is needed here -- this applies
* uniformly across the same full range the shared clamp now covers.
* The separate <=580px mobile tier (css/style.css, its own flat 14px
* !important) is untouched either way -- !important always wins over
* this regardless, exactly as it already did before this change, so
* Windows mobile is completely unaffected by this rule.
*/
html.is-windows .catalogue-section .row-wrapper .right-col p {
font-size: 15px;
}