css/style.css

   1 /**
   2  * If using a CSS pre-processor, tell it to overwrite this file. If not, place
   3  * your custom CSS modifications here.
   4  */
   5
   6 /* Lato font */
   7
   8 @font-face {
   9     font-family: "Lato";
  10     src: url("../fonts/Lato-Regular.ttf") format('truetype');
  11     font-weight: 400;
  12     font-style: normal;
  13 }
  14
  15 @font-face {
  16     font-family: "Lato";
  17     src: url('../fonts/Lato-RegularItalic.ttf') format('truetype');
  18     font-weight: 400;
  19     font-style: italic;
  20 }
  21
  22 @font-face {
  23     font-family: "Lato";
  24     src: url('../fonts/Lato-Bold.ttf') format('truetype');
  25     font-weight: 700;
  26     font-style: normal;
  27 }
  28
  29
  30 /* Universal */
  31
  32 body {
  33   font-family: "Lato", Helvetica, Arial, sans-serif;
  34   margin: 0;
  35   min-width: 320px;
  36 }
  37
  38 a { transition: 0.3s; }
  39
  40 section { position: relative; }
  41
  42 /* etcetera */
  43
  44 .visually-hidden.focusable:focus {
  45     position: absolute !important;
  46     background: #000;
  47     color: #FFF;
  48     padding: 0.5em;
  49     z-index: 9999;
  50 }
  51
  52 .main-container { min-height: 50vh; }
  53
  54 h2.block-title {
  55   background: #000;
  56   color: #FFF;
  57   padding: 0.5em;
  58 }
  59
  60 h2.block-title a:visited,
  61 h2.block-title a:focus,
  62 h2.block-title a:active,
  63 h2.block-title a {
  64   color: #DDCC00;
  65 }
  66
  67 h2.block-title a:hover {
  68   color: #FFF;
  69 }
  70
  71 .feed-icons a {
  72   background: url('../images/rss.svg') top left no-repeat;
  73   background-size: contain;
  74   height: 20px;
  75   overflow: hidden;
  76   display: block;
  77   text-indent: 25px;
  78   font-size: 1em;
  79   width: fit-content;
  80   margin-top: 1em;
  81   float: right;
  82 }
  83
  84 .view-display-id-news_page .feed-icons a {
  85   margin-top: -30px;
  86 }
  87
  88 .more-link {
  89   border: 1px solid #ddd;
  90   border-radius: .5em;
  91   padding: .5em;
  92   text-align: center;
  93   width: 50%;
  94   margin: 0 auto;
  95   font-weight: bold;
  96   margin-top: 2em;
  97 }
  98
  99 .more-link:hover {
 100   background: #EEE;
 101   color: #000;
 102 }
 103
 104 .block-views {
 105   margin-top: 20px;
 106 }
 107
 108 /* Navbar */
 109
 110 .navbar-default {
 111   background: #000;
 112   color: #FFF;
 113   border: none;
 114   border-radius: 0px;
 115   box-sizing: content-box;
 116   align-items: center;
 117   min-height: 100px;
 118 }
 119
 120 .navbar-header,
 121 #navbar-collapse {
 122   max-width: 1150px;
 123   padding: 0;
 124   margin: 0 auto;
 125   border: none;
 126   overflow: hidden;
 127 }
 128
 129 .navbar-default .navbar-toggle { display: none; }
 130
 131 .navbar-header {
 132   position: absolute;
 133   top: 5px;
 134 }
 135
 136 .navbar-brand { display: none; }
 137
 138 #block-ryf-main-menu .navbar-nav { margin-left: 195px; }
 139
 140 .navbar-default .navbar-nav > li > a:focus {
 141   outline: none;
 142 }
 143
 144 .navbar-default .navbar-nav > li > a,
 145 .navbar-default .navbar-nav > li > a:link,
 146 .navbar-default .navbar-nav > li > a:visited {
 147   color: #FFF;
 148   background: #000;
 149   border-bottom: 2px solid transparent;
 150   padding-bottom: 10px;
 151   margin-bottom: 5px;
 152 }
 153
 154 .navbar-default .navbar-nav > li > a:focus,
 155 .navbar-default .navbar-nav > li.active > a:hover,
 156 .navbar-default .navbar-nav > li > a:hover {
 157   color: #DDCC00;
 158   background: #000;
 159   border-bottom: 2px solid #DDCC00;
 160   padding-bottom: 5px;
 161   margin-bottom: 10px;
 162 }
 163
 164 .navbar-default .navbar-nav > li > a.is-active {
 165   border-bottom: 2px solid #FFF;
 166   background: #000;
 167   padding-bottom: 5px;
 168   margin-bottom: 10px;
 169 }
 170
 171 .page-header {
 172   border-bottom: 2px solid #000;
 173   font-size: 2em;
 174 }
 175
 176 .region-header .search-block-form {
 177   width: 300px;
 178   float: right;
 179 }
 180
 181 nav .search-block-form {
 182   position: absolute;
 183   width: 300px;
 184   right: 10%;
 185   top: 30px;
 186 }
 187
 188 /*
 189  *  @media screen and (min-width: 520px) and (max-width: 599px) {
 190  *   .logo img { margin-left: 50px; }
 191  *   #block-ryf-main-menu .navbar-nav { margin-left: 230px; }
 192  * }
 193  *
 194  * @media screen and (min-width: 600px) and (max-width: 767px) {
 195  *   .logo img { margin-left: 100px; }
 196  *   #block-ryf-main-menu .navbar-nav { margin-left: 280px; }
 197  * }
 198  *
 199  * @media screen and (max-width: 767px) {
 200  *   .logo img { height: 150px; margin-top: 25px; }
 201  *   .navbar-default { min-height: 230px; margin-bottom: 30px; }
 202  *   #block-ryf-main-menu .navbar-nav { max-width: 130px; }
 203  * }
 204  *
 205  */
 206
 207 @media screen and (min-width: 768px) {
 208
 209   .navbar-default {
 210      margin-bottom: 100px;
 211   }
 212   .navbar-nav {
 213      margin-top: 40px;
 214   }
 215   .region-header .breadcrumb {
 216     position: absolute;
 217     top: -70px;
 218     left: 200px;
 219     background: none;
 220   }
 221   .region-navigation-collapsible .search-block-form {
 222     float: right;
 223     padding-top: 30px;
 224     width: 210px;
 225   }
 226 }
 227
 228
 229 /* Selectors */
 230
 231
 232 @media screen and (min-width: 768px) {
 233   .form-inline .form-item .select-wrapper {
 234     display: block;
 235   }
 236   .form-inline .form-actions {
 237     margin-top: 21px;
 238   }
 239 }
 240
 241 /* News */
 242
 243 .view-news article {
 244   padding: 0.5em;
 245   margin: 0 10%;
 246 }
 247
 248 .view-news p {
 249   line-height: 1.5em;
 250   font-size: 1.1em;
 251 }
 252
 253 .view-news .node-readmore {
 254   padding: 0.5em 1em;
 255   border: 1px solid #DDD;
 256   border-radius: 0.5em;
 257   float: right;
 258 }
 259
 260 .view-news .node-readmore:hover {
 261   background: #EEE;
 262   color: #000;
 263 }
 264
 265 .view-news footer {
 266   color: #999;
 267   padding: 0.5em;
 268   text-align: right;
 269 }
 270
 271
 272 /* RYF List */
 273
 274
 275 .ryf-list-row {
 276   padding: 0;
 277   margin: 0 auto;
 278   overflow: auto;
 279 }
 280
 281 .ryf-list {
 282   float: left;
 283   margin: 0;
 284   padding: 0.5em;
 285   position: relative;
 286   list-style: none;
 287 }
 288
 289 .ryf-list article {
 290   border: 1px solid #bbb;
 291   border-radius: 5px;
 292   padding: 1em;
 293   box-shadow: 2px 2px 5px #ddd;
 294   transition: 0.3s;
 295 }
 296
 297 .ryf-list article:hover {
 298   box-shadow: 0px 0px 5px #aaa;
 299 }
 300
 301 .ryf-list .field--type-image {
 302   width: 150px;
 303   height: 150px;
 304   background: #fff;
 305   border-radius: 10px;
 306   display: flex;
 307   align-items: center;
 308 }
 309
 310 .ryf-list .field--name-field-image {
 311   margin: 0 auto 10px auto;
 312 }
 313
 314 .ryf-list img {
 315   max-width: 150px;
 316   max-height: 150px;
 317   object-fit: contain;
 318   overflow: hidden;
 319 }
 320
 321 .ryf-list img:hover {
 322   border-radius: 0;
 323 }
 324
 325 .ryf-list h2 {
 326   text-align: left;
 327   font-size: 1.5em;
 328   font-weight: 500;
 329   line-height: 1.2em;
 330   margin: 0;
 331   padding: 0;
 332   padding-bottom: 1em;
 333 }
 334
 335 .ryf-list a {
 336   color: #337AB7;
 337 }
 338
 339 .ryf-list a:hover {
 340   color: #000;
 341 }
 342
 343 .ryf-list .list-inline li {
 344   font-size: 0.9em;
 345   border: 1px solid #ddd;
 346   width: auto;
 347   border-radius: 0.5em;
 348   padding: 0.3em 0.5em;
 349   position: absolute;
 350   bottom: 15px;
 351   right: 15px;
 352 }
 353
 354 .ryf-list .list-inline li:hover {
 355   background: #eee;
 356 }
 357
 358 @media screen and (min-width: 450px) and (max-width: 659px) {
 359   .ryf-list-row {
 360     max-width: 600px;
 361   }
 362   .ryf-list {
 363     max-width: 300px;
 364     float: none;
 365     margin: 0 auto;
 366   }
 367 }
 368 @media screen and (min-width: 660px) and (max-width: 767px) {
 369   .ryf-list-row {
 370     max-width: 600px;
 371   }
 372   .ryf-list-row {
 373     margin: 0 auto;
 374     max-width: 660px;
 375   }
 376   .ryf-list {
 377     max-width: 300px;
 378     float: left;
 379   }
 380   .auto-clear .col-xs-12:nth-child(odd){clear:left;}
 381 }
 382
 383 @media screen and (min-width: 55em) {
 384
 385   .ryf-list article {
 386       min-height: 360px
 387   }
 388
 389 }
 390
 391
 392 /* Vendors list */
 393
 394
 395 .vendors-list-row {
 396   padding: 10px;
 397   margin: 0 auto;
 398   overflow: auto;
 399 }
 400
 401 @media screen and (max-width: 767px) {
 402   .vendors-list-row {
 403     margin: 0px auto;
 404   }
 405
 406   .vendors-list {
 407     margin-bottom: 40px;
 408     list-style: none;
 409
 410     overflow: auto;
 411   }
 412
 413   .vendors-list .views-field-field-icon {
 414     width: 220px;
 415
 416     margin: 0px auto 20px auto;
 417   }
 418
 419   .vendors-list .views-field-field-icon img {
 420     margin: 0 auto;
 421   }
 422
 423   .vendors-list .views-field-name,
 424   .vendors-list .views-field-field-description-summary,
 425   .vendors-list .views-field-description__value {
 426     max-width: 300px;
 427     margin: 0 auto 10px auto;
 428   }
 429
 430   .vendors-list .views-field-name {
 431     font-weight: bold;
 432     font-size: 18px;
 433     text-align: center;
 434   }
 435
 436 }
 437
 438 @media screen and (min-width: 768px) {
 439   .vendors-list-row {
 440     width: 600px;
 441     margin: 0px auto;
 442   }
 443
 444   .vendors-list {
 445     list-style: none;
 446     clear: left;
 447
 448     overflow: auto;
 449   }
 450
 451   .vendors-list .views-field-field-icon {
 452     width: 220px;
 453     height: 220px;
 454
 455     margin-bottom: 40px;
 456
 457     float: left;
 458   }
 459
 460   .vendors-list .views-field-field-icon img {
 461     margin: 0 auto;
 462   }
 463
 464   .vendors-list .views-field-name,
 465   .vendors-list .views-field-field-description-summary,
 466   .vendors-list .views-field-description__value {
 467     margin-left: 300px;
 468   }
 469
 470   .vendors-list .views-field-name {
 471     margin-bottom: 10px;
 472     font-weight: bold;
 473     font-size: 18px;
 474   }
 475 }
 476
 477
 478 /* Sidebars */
 479
 480
 481 @media screen and (max-width: 767px) {
 482   .path-products #block-views-block-categories-categories-block { display: none; }
 483 }
 484
 485
 486 /* Vendor and Category taxonomy term pages */
 487
 488
 489 .view-taxonomy-term .view-header .field--name-field-icon img {
 490   margin: 0 auto;
 491 }
 492
 493 .view-filters {
 494   clear: left;
 495 }
 496
 497 .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 498 .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 499   margin-top: 15px;
 500 }
 501
 502 @media screen and (max-width: 559px) {
 503   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 504     margin: 0 auto 40px auto;
 505     overflow: auto;
 506   }
 507
 508   .view-taxonomy-term .view-header .field--name-field-icon {
 509     margin: 0 auto 20px auto;
 510     width: 220px;
 511   }
 512
 513   .view-taxonomy-term .view-header .field--name-description,
 514   .view-taxonomy-term .view-header .field--name-field-description-summary,
 515   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 516   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 517     max-width: 360px;
 518     margin: 15px auto 0 auto;
 519     padding: 0 10px;
 520   }
 521
 522 }
 523
 524 @media screen and (min-width: 560px) {
 525   .view-taxonomy-term.view-display-id-taxonomy_term_vendor .view-header {
 526     margin: 0 0 40px 0;
 527     overflow: auto;
 528   }
 529
 530   .view-taxonomy-term .view-header .field--name-field-icon {
 531     width: 220px;
 532     float: left;
 533   }
 534
 535   .view-taxonomy-term .view-header .field--name-description,
 536   .view-taxonomy-term .view-header .field--name-field-description-summary,
 537   .view-taxonomy-term .view-header .field--name-field-vendor-support-link,
 538   .view-taxonomy-term .view-header .field--name-field-vendor-support-email {
 539     margin-left: 260px;
 540   }
 541
 542 }
 543
 544 @media screen and (min-width: 768px) {
 545   .view-taxonomy-term .view-header {
 546     max-width: 700px;
 547   }
 548 }
 549
 550
 551 /* Product */
 552
 553
 554 @media screen and (max-width: 767px) {
 555   .page-node-type-product .product {
 556     max-width: 382px;
 557     margin: 0 auto;
 558   }
 559 }
 560
 561 @media screen and (min-width: 768px) and (max-width: 991px) {
 562   .page-node-type-product .product {
 563     width: 700px;
 564     margin: 0 auto;
 565   }
 566 }
 567
 568 @media screen and (min-width: 992px) {
 569   .page-node-type-product .product {
 570     width: 800px;
 571     margin: 0 auto;
 572   }
 573 }
 574
 575 .page-node-type-product .product .field--name-field-image {
 576   padding: 10px;
 577
 578   border: 1px solid #888;
 579   border-radius: 10px;
 580 }
 581
 582 .page-node-type-product .product .field--name-field-image img {
 583   margin: 0 auto;
 584 }
 585
 586 .page-node-type-product .product .field--name-field-extra-images {
 587   padding: 5px;
 588   display: flex;
 589   align-items: center;
 590   border: 1px solid #888;
 591   border-radius: 10px;
 592 }
 593
 594 .page-node-type-product .product .field--name-field-extra-images .field--item {
 595   display: inline-block;
 596   margin: auto;
 597   padding: 5px;
 598 }
 599
 600 .page-node-type-product .product .field--name-field-categories,
 601 .page-node-type-product .product .field--name-field-vendor {
 602   margin: 10px 10px 20px 0px;
 603   padding: 10px;
 604   border: 1px solid #888;
 605   border-radius: 10px;
 606 }
 607
 608 .page-node-type-product .product .field--name-field-categories .field--item {
 609   display: list-item;
 610   list-style: circle;
 611   margin-left: 15px;
 612 }
 613
 614 #block-views-block-categories-categories-block ul {
 615   margin: 0; padding: 0 10px;
 616   list-style: none;
 617 }
 618
 619 #block-views-block-categories-categories-block li {
 620   padding: 5px 10px;
 621   border: 1px solid #DDD;
 622   border-radius: 5px;
 623   list-style: none;
 624   margin: 5px 0;
 625 }
 626
 627 #block-views-block-categories-categories-block li:hover {
 628   background: #EEE;
 629   color: #000;
 630 }
 631
 632 #block-views-block-categories-categories-block a {
 633   width: 100%;
 634   display: block;
 635 }
 636
 637 /* product page colors */
 638 .page-node-type-product .product .field--name-field-image {
 639   background-color: #fff;
 640   border-color: #aaa;
 641 }
 642 .page-node-type-product .product .field--name-field-extra-images {
 643   background-color: #f3f3f3;
 644   border-color: #aaa;
 645 }
 646 .page-node-type-product .product .field--name-field-categories {
 647   background-color: #def;
 648   border-color: #8ad;
 649 }
 650 .page-node-type-product .product .field--name-field-vendor {
 651   background-color: #dfe;
 652   border-color: #8da;
 653 }
 654
 655 @media screen and (max-width: 767px) {
 656   .page-node-type-product .product .field--name-field-extra-images {
 657     margin: 10px auto 0px auto;
 658   }
 659
 660   .page-node-type-product .product .field--name-body,
 661   .page-node-type-product .product .field--name-field-vendor-product-link,
 662   .page-node-type-product .product .field--name-field-certification-details,
 663   .page-node-type-product .product .field--name-field-certification-date,
 664   .page-node-type-product .product .field--name-field-source-code-links {
 665     margin-bottom: 20px;
 666   }
 667
 668   .page-node-type-product .product .field--name-field-categories,
 669   .page-node-type-product .product .field--name-field-vendor {
 670     margin-bottom: 0px;
 671     float: left;
 672   }
 673
 674   .page-node-type-product .product .field--name-body {
 675     padding-top: 20px;
 676     clear: both;
 677   }
 678 }
 679
 680
 681 @media screen and (min-width: 768px) {
 682   .page-node-type-product .product .field--name-field-image {
 683     width: 382px;
 684     float: left;
 685   }
 686
 687   .page-node-type-product .product .field--name-field-extra-images {
 688     float: left;
 689     clear: left;
 690     width: 382px;
 691     margin-top: 10px;
 692   }
 693
 694   .page-node-type-product .product .field--name-body,
 695   .page-node-type-product .product .field--name-field-vendor-product-link,
 696   .page-node-type-product .product .field--name-field-certification-details,
 697   .page-node-type-product .product .field--name-field-certification-date,
 698   .page-node-type-product .product .field--name-field-source-code-links {
 699     margin-left: 400px;
 700     margin-bottom: 20px;
 701   }
 702
 703   .page-node-type-product .product .field--name-field-categories {
 704     float: left;
 705     clear: left;
 706   }
 707
 708   .page-node-type-product .product .field--name-field-vendor {
 709     float: left;
 710   }
 711
 712 }
 713
 714
 715 /* News and Product Announcements */
 716
 717
 718 .page-node-type-product-announcement .page-header,
 719 .page-node-type-product-announcement .tabs--primary,
 720 .page-node-type-product-announcement .region-content,
 721 .page-node-type-general-news-item .page-header,
 722 .page-node-type-general-news-item .tabs--primary,
 723 .page-node-type-general-news-item .region-content,
 724 .page-node-type-page .page-header,
 725 .page-node-type-page .tabs--primary,
 726 .page-node-type-page .region-content,
 727 .path-news .page-header,
 728 .path-news .tabs--primary,
 729 .path-news .region-content {
 730   max-width: 800px;
 731   margin: 0 auto;
 732 }
 733
 734 /* don't apply above max-width rule to main page */
 735 .path-frontpage .page-header,
 736 .path-frontpage .tabs--primary,
 737 .path-frontpage .region-content {
 738   max-width: 2000px; /* high number beyond the max */
 739 }
 740
 741 .page-node-type-page .page-header {
 742   margin-bottom: 20px;
 743 }
 744
 745 .path-news h2,
 746 .block-views-blocknews-news-block article h2 {
 747   font-size: 25px;
 748 }
 749
 750 .page-node-type-product-announcement .author,
 751 .page-node-type-general-news-item .author {
 752   margin: 10px 0 20px 0;
 753   font-style: oblique;
 754 }
 755
 756 .page-node-type-product-announcement .field--name-body,
 757 .page-node-type-general-news-item .field--name-body {
 758   margin-bottom: 20px;
 759 }
 760
 761 .page-node-type-product-announcement .field--name-field-external-news-link,
 762 .page-node-type-general-news-item .field--name-field-external-news-link {
 763   margin-bottom: 20px;
 764 }
 765
 766 .page-node-type-product-announcement .field--name-field-vendor-page,
 767 .page-node-type-product-announcement .field--name-field-announced-products {
 768   margin-bottom: 20px;
 769 }
 770
 771
 772 /* Search Results */
 773
 774
 775 @media screen and (max-width: 600px) {
 776   .path-search .region-content > ol {
 777     width: 300px;
 778   }
 779 }
 780 @media screen and (min-width: 601px) and (max-width 1000px) {
 781   .path-search .region-content > ol {
 782     width: 560px;
 783   }
 784 }
 785 @media screen and (min-width: 1001px) {
 786   .path-search .region-content > ol {
 787     width: 900px;
 788   }
 789 }
 790
 791 .path-search .region-content > ol {
 792   margin: 0 auto;
 793   padding-left: 0;
 794   overflow: auto;
 795 }
 796
 797 .path-search .region-content > ol li {
 798   width: 280px;
 799   height: 280px;
 800   margin: 0px auto;
 801   padding: 10px;
 802
 803   float: left;
 804
 805   list-style: none;
 806   overflow: hidden;
 807 }
 808
 809 .path-search .region-content > ol li h3 {
 810   text-align: center;
 811 }
 812
 813 .path-search .region-content > ol li .search-image {
 814   width: 100px;
 815   height: 100px;
 816
 817   margin: 0 auto;
 818
 819   display: flex;
 820   align-items: center;
 821 }
 822
 823 .path-search .region-content > ol li img {
 824 }
 825
 826
 827 /* Footer */
 828
 829 .footer {
 830   background: #333;
 831   color: #FFF;
 832 }
 833
 834 /* full page width for footer */
 835
 836 .footer {
 837   width: 100%;
 838 }
 839
 840 .footer a { color: #DDCC00; }
 841
 842 .footer a:hover { color: #FFF; }
 843
 844 .footer h4 { font-weight: bold; }
 845
 846 .footer .copyright { font-size: 0.9em; text-align: center; width: 80%; margin-top: 1em; border-top: 1px solid #111; padding: 1em; }
 847
 848 #fsf-logo-footer { margin-bottom: 10px; }
 849
 850 @media print { #fsf-logo-footer { filter: invert(100%) } }
 851